初始数据结构
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
}
]