vue 树状结构数据渲染 (java 处理 list ->树状)

树状结构 Element ui

https://element.eleme.cn/#/zh-CN/component/tree

html 复制代码
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
html 复制代码
<script>
  export default {
    data() {
      return {
        data: [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    methods: {
      handleNodeClick(data) {
        console.log(data);
      }
    }
  };
</script>

加入关键字进行过滤 和 数据渲染

html 复制代码
  <el-input
                    placeholder="输入关键字进行过滤"
                    v-model="filterText">
            </el-input>
            <el-tree
                    class="filter-tree"
                    :data="data"
                    show-checkbox
                    :props="defaultProps"
                    accordion
                    :filter-node-method="filterNode"
                    ref="tree"
                    @node-click="handleNodeClick">
            </el-tree>
js 复制代码
 watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            }
        },
        created() {
            this.load_data()
        },
        mounted(){
        },//钩子函数,一般在初始化页面完成后,再对dom节点进行相关操作
        methods:{
            load_data(){
                const _this = this;
                axios({
                    method:"get",
                    url:"http://localhost:8089/tree/list",
                }).then(resp=>{
                    _this.data = resp.data
                });
            },
            handleNodeClick(data) {
                console.log(data.label);
                this.label = data.label

            },
            filterNode(value, data){
                if (!value) return true;
                return data.label.indexOf(value) !== -1;
            }
        },
        data(){
            return {
                label: "你好",
                filterText: '',
                data:[],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                }
            }
        }
    })

java Calss

java 复制代码
package com.zhan;

import cn.hutool.json.JSONUtil;
import com.zhan.pojo.vo.TreeKnowledgePoints;
import org.junit.jupiter.api.Test;
import org.springframework.boot.test.context.SpringBootTest;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@SpringBootTest
public class Tree {
    private static List<TreeKnowledgePoints> treeKnowledgePoints;

    @Test
    void Test(){
        TreeKnowledgePoints points = new TreeKnowledgePoints(1,0,"操作系统引论");
        TreeKnowledgePoints points1 = new TreeKnowledgePoints(2,1,"操作系统作用和目标");
        TreeKnowledgePoints points2 = new TreeKnowledgePoints(3,2,"操作系统作用");
        TreeKnowledgePoints points3 = new TreeKnowledgePoints(4,2,"操作系统目标");
        treeKnowledgePoints = new ArrayList<TreeKnowledgePoints>();
        treeKnowledgePoints.add(points);
        treeKnowledgePoints.add(points1);
        treeKnowledgePoints.add(points2);
        treeKnowledgePoints.add(points3);
       List<TreeKnowledgePoints> list = buildTree(treeKnowledgePoints,0);
        System.out.println(JSONUtil.toJsonStr(list));
    }

    /**
     * 递归
     * @param deptList
     * @param pid
     * @return
     */
    private static List<TreeKnowledgePoints> buildTree(List<TreeKnowledgePoints> deptList,int pid){
        List<TreeKnowledgePoints> treeList = new ArrayList<TreeKnowledgePoints>();
        for (TreeKnowledgePoints dept : deptList) {
            if (dept.getParentId() == pid) {
                dept.setChildren(buildTree(deptList, dept.getId()));
                treeList.add(dept);
            }
        }
        return treeList;
    }


}
相关推荐
paopaokaka_luck2 分钟前
基于SpringBoot+Vue的少儿编程培训机构管理系(WebSocket及时通讯、协同过滤算法、Echarts图形化分析)
java·vue.js·spring boot·后端·spring
雨过天晴而后无语11 分钟前
Windchill中MVC选中事件级联另一MVC内容
java·javascript·html·mvc
胖咕噜的稞达鸭16 分钟前
C++中的父继子承:继承方式实现栈及同名隐藏和函数重载的本质区别, 派生类的4个默认成员函数
java·c语言·开发语言·数据结构·c++·redis·算法
陈小桔36 分钟前
Springboot之常用注解
java·spring boot·后端
Gazer_S1 小时前
【前端状态管理技术解析:Redux 与 Vue 生态对比】
前端·javascript·vue.js
小光学长1 小时前
基于Vue的图书馆座位预约系统6emrqhc8(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
Y学院1 小时前
vue的组件通信
前端·javascript·vue.js
code小毛孩2 小时前
如何简单的并且又能大幅度降低任务队列的锁粒度、提高吞吐量?
java·jvm·数据库
你不是我我2 小时前
【Java开发日记】请介绍类加载过程,什么是双亲委派模型?
java·开发语言
牢七2 小时前
java10
java