部门树,菜单树其实底层都是一样的,这是后端返回的数组
let lists = [
{ name: '系统管理', id: '1', pid: '0' },
{ name: '系统管理二级菜单1', id: '10', pid: '1' },
{ name: '系统管理二级菜单2', id: '11', pid: '1' },
{ name: '系统管理二级菜单子菜单1', id: '110', pid: '11' },
{ name: '系统管理二级菜单子菜单的子菜单', id: '1101', pid: '110' },
{ name: '角色管理', id: '2', pid: '0' },
{ name: '角色管理二级菜单', id: '20', pid: '2' },
{ name: '角色管理三级菜单', id: '200', pid: '20' },
{ name: '角色管理四级菜单', id: '2000', pid: '200' },
{ name: '角色管理五级菜单', id: '20000', pid: '2000' },
{ name: '用户管理', id: '3', pid: '0' },
{ name: '用户管理二级', id: '30', pid: '3' }
]
这是我们的遍历函数
let fun = function (list, id) {
let child = []; // 这是用来装子级的数组
list.forEach(item => {
if (item.pid == id) {
// 是当前循环的菜单的子集,写入数组
// 然后当前整个item可能还不是最后一集菜单,继续执行这个fun方法,找找看有没有子集
child.push(item)
item.child = fun(list, item.id)
}
})
return child; // 返回当前循环最后得到的菜单集合
}
最后只需要调用这个方法,即可得到想要的部门数,适用于动态部门树,比如后台可自动添加,前端有不知道到底有多少层级,用这个函数就完美解决啦
let obg = fun(lists, "0") // 我这里的一级菜单pid都为0,所以第一次调用传0,可以根据实际情况变化
// 最后得出的结果如下
let menu = [
{
"name": "系统管理",
"id": "1",
"pid": "0",
"child": [
{
"name": "系统管理二级菜单1",
"id": "10",
"pid": "1",
"child": [ ]
},
{
"name": "系统管理二级菜单2",
"id": "11",
"pid": "1",
"child": [
{
"name": "系统管理二级菜单子菜单1",
"id": "110",
"pid": "11",
"child": [
{
"name": "系统管理二级菜单子菜单的子菜单",
"id": "1101",
"pid": "110",
"child": [ ]
}
]
}
]
}
]
},
{
"name": "角色管理",
"id": "2",
"pid": "0",
"child": [
{
"name": "角色管理二级菜单",
"id": "20",
"pid": "2",
"child": [
{
"name": "角色管理三级菜单",
"id": "200",
"pid": "20",
"child": [
{
"name": "角色管理四级菜单",
"id": "2000",
"pid": "200",
"child": [
{
"name": "角色管理五级菜单",
"id": "20000",
"pid": "2000",
"child": [ ]
}
]
}
]
}
]
}
]
},
{
"name": "用户管理",
"id": "3",
"pid": "0",
"child": [
{
"name": "用户管理二级",
"id": "30",
"pid": "3",
"child": [ ]
}
]
}
]