假設(shè)數(shù)據(jù)如下
const data = [
{ id: 2, name: "研發(fā)部", parentId: 1 },
{ id: 4, name: "行政人事部", parentId: 1 },
{ id: 6, name: "行政人事部下面的行政", parentId: 4 },
{ id: 7, name: "行政人事部下面的人力資源", parentId: 4 },
{ id: 20, name: "研發(fā)下面的產(chǎn)品組", parentId: 2 },
{ id: 21, name: "研發(fā)下面的測試組", parentId: 2 },
{ id: 22, name: "研發(fā)下面的運維組", parentId: 2 },
{ id: 23, name: "研發(fā)下面的前端組", parentId: 2 },
{ id: 24, name: "研發(fā)下面的后臺組", parentId: 2 },
{ id: 25, name: "研發(fā)下面的移動開發(fā)組", parentId: 2 },
{ id: 99, name: "移動組下面的組", parentId: 25 },
{ id: 98, name: "移動組下面的組", parentId: 25 },
];
需要將數(shù)據(jù)組成樹狀 方法如下
function formatToTree(ary, pid) {
return ary
.filter((item) =>
// 如果沒有父id（第一次遞歸的時候）將所有父級查詢出來
// 這里認(rèn)為 item.parentId === 1 就是最頂層 需要根據(jù)業(yè)務(wù)調(diào)整
pid === undefined ? item.parentId === 1 : item.parentId === pid
)
.map((item) => {
// 通過父節(jié)點ID查詢所有子節(jié)點
item.children = formatToTree(ary, item.id);
return item;
});
}
console.log(JSON.stringify(formatToTree(data)));
得到的結(jié)果如下：
[
{
id: 2,
name: "研發(fā)部",
parentId: 1,
children: [
{ id: 20, name: "研發(fā)下面的產(chǎn)品組", parentId: 2, children: [] },
{
id: 25,
name: "研發(fā)下面的移動開發(fā)組",
parentId: 2,
children: [
{ id: 99, name: "移動組下面的組", parentId: 25, children: [] },
{ id: 98, name: "移動組下面的組", parentId: 25, children: [] },
],
},
],
},
{
id: 4,
name: "行政人事部",
parentId: 1,
children: [
{ id: 6, name: "行政人事部下面的行政", parentId: 4, children: [] },
{
id: 7,
name: "行政人事部下面的人力資源",
parentId: 4,
children: [],
},
],
},
];
