当前位置：首页 > news >正文

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

news 2025/8/3 0:54:30

树状结构 Element ui

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

<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>

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

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

  <el-inputplaceholder="输入关键字进行过滤"v-model="filterText"></el-input><el-treeclass="filter-tree":data="data"show-checkbox:props="defaultProps"accordion:filter-node-method="filterNode"ref="tree"@node-click="handleNodeClick"></el-tree>

 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

在这里插入图片描述

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