前端根据一个数组便利出部门树，菜单树，一个js便利函数即可解决

部门树，菜单树其实底层都是一样的，这是后端返回的数组

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": [ ]
            }
        ]
    }
]