const data = [
            { id: 1, pId: 0, name: '系统管理' },
            { id: 2, pId: 0, name: '权限管理' },
            { id: 3, pId: 0, name: '设备管理' },
            { id: 4, pId: 2, name: '用户管理' },
            { id: 5, pId: 4, name: '用户列表' },
            { id: 6, pId: 4, name: '用户添加' },
            { id: 12, pId: 2, name: '角色管理' },
            { id: 13, pId: 12, name: '角色列表' },
            { id: 14, pId: 12, name: '角色添加' },
            { id: 20, pId: 1, name: '日志管理' },
            { id: 21, pId: 20, name: '日志列表' },
            { id: 24, pId: 20, name: '日志编辑' },
            { id: 28, pId: 1, name: '菜单管理' },
            { id: 29, pId: 28, name: '菜单列表' },
            { id: 30, pId: 28, name: '菜单添加' }
        ];
        const treeData = tree(data);

        console.log('data', data)
        console.log('treeData', treeData)

        /**
         * 生成二叉树
         * @param arr 原数据
         * @param pid 父级属性
         * @param firstId 父级的顶级值
         * return 二叉树数据
        */
        function tree(arr, pid = 'pId', firstId = 0) {
            // 拷贝原数据
            const arrData = JSON.parse(JSON.stringify(arr));
            // 生成结果
            const treeData = [];

            // 用于递归归位
            const fun = (data, obj) => {
                // 顶级
                if (obj[pid] == firstId) treeData.push(obj);
                // 非顶级
                else {
                    for (let i = 0; i < data.length; i++) {
                        if (data[i].id == obj[pid]) {
                            data[i].children.push(obj);
                            break;
                        } else {
                            fun(data[i].children, obj);
                        }
                    }
                }
            }

            // 先排序pid防止错乱,再遍历
            arrData.sort((a, b) => { return a[pid] - b[pid] })
            for (let i = 0; i < arrData.length; i++) {
                const d = {
                    ...arrData[i],
                    children: []
                }
                fun(treeData, d);
            }
            return treeData;
        }
    
Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐