就是一个简单的查询
List<Dept> deptList = mapper.getDeptList(); Map<Long, OrgNode> nodeMap = new HashMap<>(); List<Long> rootIds = new ArrayList<>(); for (Dept dept : deptList) { Long deptId = dept.getDeptId(); String name = dept.getDeptName(); Long parentId = dept.getParentId(); OrgNode node = nodeMap.computeIfAbsent(deptId, OrgNode::new); node.setId(deptId); node.setLabel(name); node.setParentId(parentId); if (parentId == 0) { rootIds.add(deptId); } else { OrgNode parent = nodeMap.computeIfAbsent(parentId, OrgNode::new); parent.getChildren().add(node); } } // 3. 输出组织机构 List<OrgNode> orgList = new ArrayList<>(); for (long rootId : rootIds) { orgList.add(nodeMap.get(rootId)); } List<Map<String, Object>> result = dfs2(orgList);
业务需要
/** * 只查询两级 * @param nodes * @return */ private static List<Map<String, Object>> dfs2(List<OrgNode> nodes) { List<Map<String, Object>> result = new ArrayList<>(); for (OrgNode node : nodes) { Map<String, Object> map = new HashMap<>(); map.put("id", node.getId()); map.put("label", node.getLabel()); map.put("parentId", node.getParentId()); List<OrgNode> children = node.getChildren(); if (children != null && !children.isEmpty()){ List<OrgNode> collect = children.stream().peek(s -> s.setChildren(null)).collect(Collectors.toList()); map.put("children", collect); } result.add(map); } return result; }
效果
查询所有级别
递归查询
/** * 查询所有组织树 * @param nodes * @return */ private static List<Map<String, Object>> dfs(List<OrgNode> nodes) { List<Map<String, Object>> result = new ArrayList<>(); for (OrgNode node : nodes) { Map<String, Object> map = new HashMap<>(); map.put("id", node.getId()); map.put("label", node.getLabel()); map.put("parentId", node.getParentId()); List<OrgNode> children = node.getChildren(); if (children != null && !children.isEmpty()) { map.put("children", dfs(children)); } result.add(map); } return result; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>树形控件</title> <script src="js/vue.js"></script> <script src="element-ui/lib/index.js"></script> <script src="js/axios-0.18.0.js"></script> <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> </head> <body> <div id="app"> <el-tree :data="data" show-checkbox default-expand-all node-key="id" ref="tree" highlight-current :props="defaultProps" @check-change="handleCheckChange" :indent="20" > </el-tree> <el-button @click="getCheckedNodes">通过 node 获取</el-button> </div> <script> new Vue({ el:"#app", methods:{ getCheckedNodes(){ console.log("打印选中结果:"+this.selectedNodeData) }, handleCheckChange(data, targetNode){ let checkedNodes = this.$refs.tree.getCheckedNodes() // 获取所有选中的节点数据 // console.log('当前选中的节点:', checkedNodes) // 获取选中节点的 ID 列表 let checkedNodeIds = checkedNodes.map(node => { return node.id }) this.selectedNodeData=checkedNodeIds; console.log('当前选中的节点 ID 列表:', this.selectedNodeData) }, getNodeIds(node, ids) { // 处理当前节点的 ID ids.push(node.id) // 处理所有子节点的 ID for (let child of node.children) { this.getNodeIds(child, ids) } }, getList(){ axios.get('http://localhost:8081/brand_case/dao.do?method=list_tree').then( res=>{ this.data=res.data.data } ) } }, created(){ this.getList(); }, data(){ return{ selectedNodeData: [], data: [{ id: 1, label: '一级 1', children: [{ id: 4, label: '二级 1-1', children: [{ id: 9, label: '三级 1-1-1' }, { id: 10, label: '三级 1-1-2' }] }] }, { id: 2, label: '一级 2', children: [{ id: 5, label: '二级 2-1' }, { id: 6, label: '二级 2-2' }] }, { id: 3, label: '一级 3', children: [{ id: 7, label: '二级 3-1', children: [{ id: 7-1, label: '二级 3-1-1' }] }, { id: 8, label: '二级 3-2' }] }], defaultProps: { children: 'children', label: 'label' } } } }) </script> </body> </html>