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;
    }


}
相关推荐
Seven9710 分钟前
了解GC吗?什么是GC?
java
Edingbrugh.南空25 分钟前
Flink ClickHouse 连接器维表源码深度解析
java·clickhouse·flink
掘金-我是哪吒1 小时前
分布式微服务系统架构第157集:JavaPlus技术文档平台日更-Java多线程编程技巧
java·分布式·微服务·云原生·架构
江城开朗的豌豆1 小时前
Vue-router方法大全:让页面跳转随心所欲!
前端·javascript·vue.js
飞翔的佩奇1 小时前
Java项目:基于SSM框架实现的忘忧小区物业管理系统【ssm+B/S架构+源码+数据库+毕业论文+开题报告】
java·数据库·mysql·vue·毕业设计·ssm框架·小区物业管理系统
江城开朗的豌豆1 小时前
Vue路由动态生成秘籍:让你的链接'活'起来!
前端·javascript·vue.js
江城开朗的豌豆1 小时前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js