const menus = [
{ id: "Dashboard", name: "主页", pid: "/", sort: 1 },
{ id: "M10", name: "角色", pid: "M4", sort: 5 },
{ id: "M11", name: "策略", pid: "M4", sort: 6 },
{ id: "M13", name: "授权", pid: "M4", sort: 7 },
{ id: "M14", name: "用户组", pid: "M4", sort: 4 },
{ id: "M2", name: "产品", pid: "/", sort: 2 },
{ id: "M3", name: "设备", pid: "/", sort: 3 },
{ id: "M4", name: "管理", pid: "/", sort: 4 },
{ id: "M5", name: "所有设备", pid: "M3", sort: 0 },
{ id: "M6", name: "OTA", pid: "M3", sort: 1 },
{ id: "M7", name: "租户", pid: "M4", sort: 0 },
{ id: "M8", name: "IAM用户", pid: "M4", sort: 1 },
{ id: "M9", name: "用户", pid: "M4", sort: 2 }
]
const arr = [
{ id: 1, name: '部门1', pid: 0 },
{ id: 2, name: '部门2', pid: 1 },
{ id: 3, name: '部门3', pid: 1 },
{ id: 4, name: '部门4', pid: 3 },
{ id: 5, name: '部门5', pid: 4 },
{ id: 6, name: '部门6', pid: 0 },
{ id: 7, name: '部门7', pid: 1 },
{ id: 8, name: '部门8', pid: 6 },
]
**方法一**： 递归实现
function formatDataToTree(param) {
const temp = []
function getLevelOneMenu() {
param.forEach(item => {
if ([0, '/'].includes(item.pid)) {
temp.push(item)
}
})
}
getLevelOneMenu(param)
function getChildrenMenus(temp, initArr) {
for (const i of temp) {
const arr2 = []
for (const j of initArr) {
if (i.id === j.pid) {
const newItem = { ...j, children: [] };
arr2.push(newItem)
i.children = arr2
} else {
getChildrenMenus(i.children || [], initArr)
}
}
}
}
getChildrenMenus(temp, param)
return temp
}
console.log('lev-one', formatDataToTree(arr))
console.log('--menus', formatDataToTree(menus))
**方法二： 代码少，但是不好理解**
const getChildren = (data, result, pid) => {
for (const item of data) {
if (item.pid === pid) {
const newItem = { ...item, children: [] };
result.push(newItem);
getChildren(data, newItem.children, item.id);
}
}
}
const arrayToTree = (data, pid) => {
const result = [];
getChildren(data, result, pid)
return result;
}
const res = arrayToTree(arr, 0)
console.log('res', res)
