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

js 组装树形结构

news 来源：原创 2025/6/26 8:59:56

初始数据结构

let data = [{"id": 1,"parentId": 32,"name": "测试1","nodelevel": 0,},{"id": 2,"parentId": 32,"name": "测试2","nodelevel": 3,},{"id": 3,"parentId": 2,"name": "测试2-0","nodelevel": 4,},{"id": 4,"parentId": 2,"name": "测试2-1","nodelevel": 4,},{"id": 6,"parentId": 3,"name": "测试2-0-0","nodelevel": 5,},{"id": 7,"parentId": 3,"name": "测试2-0-1","nodelevel": 5,},{"id": 8,"parentId": 3,"name": "测试2-0-2","nodelevel": 5,},{"id": 9,"parentId": 3,"name": "测试2-0-3","nodelevel": 5,},{"id": 10,"parentId": 3,"name": "测试2-0-4","nodelevel": 5,},{"id": 11,"parentId": 4,"name": "测试2-1-0","nodelevel": 5,},{"id": 12,"parentId": 4,"name": "测试2-1-1","nodelevel": 5,},{"id": 13,"parentId": 4,"name": "测试2-1-2","nodelevel": 5,},{"id": 14,"parentId": 2,"name": "测试2-2","nodelevel": 0,},{"id": 15,"parentId": 2,"name": "测试2-3","nodelevel": 0,},{"id": 16,"parentId": 2,"name": "测试2-4","nodelevel": 0,},{"id": 17,"parentId": 14,"name": "测试2-2-0","nodelevel": 0,},{"id": 18,"parentId": 15,"name": "测试2-3-0","nodelevel": 0,},{"id": 19,"parentId": 16,"name": "测试2-4-0","nodelevel": 0,},{"id": 20,"parentId": 16,"name": "测试2-4-1","nodelevel": 0,},{"id": 21,"parentId": 2,"name": "测试2-5","nodelevel": 0,},{"id": 22,"parentId": 21,"name": "测试2-5-0","nodelevel": 0,},{"id": 23,"parentId": 21,"name": "测试2-5-1","nodelevel": 0,},{"id": 25,"parentId": 2,"name": "测试2-6","nodelevel": 0,},{"id": 26,"parentId": 4,"name": "测试2-1-3","nodelevel": 5,},{"id": 27,"parentId": 25,"name": "技术部1组","nodelevel": 0,},{"id": 28,"parentId": 25,"name": "技术部2组","sortid": 2,"nodelevel": 0,},{"id": 29,"parentId": 21,"name": "投研三部","nodelevel": 0,},{"id": 30,"parentId": 32,"name": "策划部","nodelevel": 0,},{"id": 32,"parentId": 31,"name": "部门","nodelevel": 2,},{"id": 54,"parentId": 2,"name": "A软件部","nodelevel": 0,},{"id": 57,"parentId": 54,"name": "一部1组","nodelevel": 0,},{"id": 58,"parentId": 32,"name": "测试3","nodelevel": 0,},{"id": 59,"parentId": 2,"name": "测试2-7","nodelevel": 0,},{"id": 67,"parentId": 0,"name": "测试部门","nodelevel": 0,},{"id": 69,"parentId": 59,"name": "客1部","nodelevel": 0,},{"id": 70,"parentId": 59,"name": "客2部","sortid": 2,"nodelevel": 0,},{"id": 71,"parentId": 59,"name": "客3部","nodelevel": 0,},{"id": 72,"parentId": 59,"name": "客4部","nodelevel": 0,},{"id": 73,"parentId": 21,"name": "研四部","nodelevel": 0,},{"id": 74,"parentId": 32,"name": "测试4","nodelevel": 0,}
]

实现代码：
这里用的是递归

created(){
const treeData=this.setArrayTree(data,0)
//这里没有根节点数据也存在父节点找不到的情况，所有做过滤  
let data1 = treeData.filter((item) =>treeData.findIndex((o) => o.companyDepartmentId == item.parentid) == -1);},methods: {
// 组装树形结构（这里使用了递归）setArrayTree(data, parentId = '') {const rootItems = data;const childrenOfItem = new Map();for (const item of data) {const parentId = item.parentid;if (!childrenOfItem.has(parentId)) {//map中不存在该数据childrenOfItem.set(parentId, []); //存至map中并赋值为空}childrenOfItem.get(parentId).push(item); //parentId相同的存在一起}// 递归构建子树function addChildren(nodes) {return nodes.map((node) => {return childrenOfItem.get(node.companyDepartmentId)? {...node,children: addChildren(childrenOfItem.get(node.companyDepartmentId) || []),}: node;});}if (typeof parentId === 'number')return addChildren(childrenOfItem.get(parentId) || []);return addChildren(rootItems);},}

非递归实现方法：

created(){
const treeData=this.buildTree(data)
},methods: {//数据组装buildTree(data, parentId = '') {// 检查数据是否为空if (!data || data.length === 0) return [];// 创建一个 Map，用于快速查找节点const nodeMap = new Map();data.forEach((item) => {nodeMap.set(item.companyDepartmentId, item); // 将每个节点存储到 Map 中});// 构建树形结构const tree = [];data.forEach((item) => {// 如果当前节点的 parentId 存在，且 parentId 对应的节点在 Map 中if (nodeMap.has(item.parentid)) {const parent = nodeMap.get(item.parentid);if (!parent.children) {parent.children = []; // 初始化父节点的 children 属性}parent.children.push(item); // 将当前节点添加到父节点的 children 中} else {// 如果当前节点的 parentId 不存在（即根节点），则直接添加到树中tree.push(item);}});return tree;},

获取结果：

[{"id": 32,"parentId": 31,"name": "部门","nodelevel": 2,"children": [{"id": 1,"parentId": 32,"name": "测试1","nodelevel": 0},{"id": 2,"parentId": 32,"name": "测试2","nodelevel": 3,"children": [{"id": 3,"parentId": 2,"name": "测试2-0","nodelevel": 4,"children": [{"id": 6,"parentId": 3,"name": "测试2-0-0","nodelevel": 5},{"id": 7,"parentId": 3,"name": "测试2-0-1","nodelevel": 5},{"id": 8,"parentId": 3,"name": "测试2-0-2","nodelevel": 5},{"id": 9,"parentId": 3,"name": "测试2-0-3","nodelevel": 5},{"id": 10,"parentId": 3,"name": "测试2-0-4","nodelevel": 5}]},{"id": 4,"parentId": 2,"name": "测试2-1","nodelevel": 4,"children": [{"id": 11,"parentId": 4,"name": "测试2-1-0","nodelevel": 5},{"id": 12,"parentId": 4,"name": "测试2-1-1","nodelevel": 5},{"id": 13,"parentId": 4,"name": "测试2-1-2","nodelevel": 5},{"id": 26,"parentId": 4,"name": "测试2-1-3","nodelevel": 5}]},{"id": 14,"parentId": 2,"name": "测试2-2","nodelevel": 0,"children": [{"id": 17,"parentId": 14,"name": "测试2-2-0","nodelevel": 0}]},{"id": 15,"parentId": 2,"name": "测试2-3","nodelevel": 0,"children": [{"id": 18,"parentId": 15,"name": "测试2-3-0","nodelevel": 0}]},{"id": 16,"parentId": 2,"name": "测试2-4","nodelevel": 0,"children": [{"id": 19,"parentId": 16,"name": "测试2-4-0","nodelevel": 0},{"id": 20,"parentId": 16,"name": "测试2-4-1","nodelevel": 0}]},{"id": 21,"parentId": 2,"name": "测试2-5","nodelevel": 0,"children": [{"id": 22,"parentId": 21,"name": "测试2-5-0","nodelevel": 0},{"id": 23,"parentId": 21,"name": "测试2-5-1","nodelevel": 0},{"id": 29,"parentId": 21,"name": "投研三部","nodelevel": 0},{"id": 73,"parentId": 21,"name": "研四部","nodelevel": 0}]},{"id": 25,"parentId": 2,"name": "测试2-6","nodelevel": 0,"children": [{"id": 27,"parentId": 25,"name": "技术部1组","nodelevel": 0},{"id": 28,"parentId": 25,"name": "技术部2组","sortid": 2,"nodelevel": 0}]},{"id": 54,"parentId": 2,"name": "A软件部","nodelevel": 0,"children": [{"id": 57,"parentId": 54,"name": "一部1组","nodelevel": 0}]},{"id": 59,"parentId": 2,"name": "测试2-7","nodelevel": 0,"children": [{"id": 69,"parentId": 59,"name": "客1部","nodelevel": 0},{"id": 70,"parentId": 59,"name": "客2部","sortid": 2,"nodelevel": 0},{"id": 71,"parentId": 59,"name": "客3部","nodelevel": 0},{"id": 72,"parentId": 59,"name": "客4部","nodelevel": 0}]}]},{"id": 30,"parentId": 32,"name": "策划部","nodelevel": 0},{"id": 58,"parentId": 32,"name": "测试3","nodelevel": 0},{"id": 74,"parentId": 32,"name": "测试4","nodelevel": 0}]},{"id": 67,"parentId": 0,"name": "测试部门","nodelevel": 0}
]