SOURCE

// 需转化数组示例
const data = [

    { id: '01', lable: '项目经理', pid: '' },

    { id: '02', lable: '产品leader', pid: '01' },

    { id: '03', lable: 'UIleader', pid: '01' },

    { id: '04', lable: '技术leader', pid: '01' },

    { id: '05', lable: '测试leader', pid: '01' },

    { id: '06', lable: '运维leader', pid: '01' },

    { id: '07', lable: '产品经理', pid: '02' },

    { id: '08', lable: '产品经理', pid: '02' },

    { id: '09', lable: 'UI设计师', pid: '03' },

    { id: '10', lable: '前端工程师', pid: '04' },

    { id: '11', lable: '后端工程师', pid: '04' },

    { id: '12', lable: '后端工程师', pid: '04' },

    { id: '13', lable: '测试工程师', pid: '05' },

    { id: '14', lable: '测试工程师', pid: '05' },

    { id: '15', lable: '运维工程师', pid: '06' }

]
// 转化结果示例
const treeData = [
    {
        id: '01',
        lable: '项目经理',
        pid: '',
        children: [
            {
                id: '02',
                lable: '产品leader',
                pid: '01',
                children: [
                    {
                        id: '07',
                        lable: '产品经理1',
                        pid: '02',
                        children: []
                    },
                    {
                        id: '08',
                        lable: '产品经理2',
                        pid: '02',
                        children: []
                    }
                ]
            },
            {
                id: '03',
                lable: 'UIleader',
                pid: '01',
                children: [
                    {
                        id: '09',
                        lable: 'UI设计师',
                        pid: '03',
                        children: []
                    }
                ]
            },
            {
                id: '04',
                lable: '技术leader',
                pid: '01',
                children: [
                    {
                        id: '10',
                        lable: '前端工程师',
                        pid: '04',
                        children: []
                    },
                    {
                        id: '11',
                        lable: '后端工程师1',
                        pid: '04',
                        children: []
                    },
                    {
                        id: '12',
                        lable: '后端工程师2',
                        pid: '04',
                        children: []
                    }
                ]
            },
            {
                id: '05',
                lable: '测试leader',
                pid: '01',
                children: [
                    {
                        id: '13',
                        lable: '测试工程师1',
                        pid: '05',
                        children: []
                    },
                    {
                        id: '14',
                        lable: '测试工程师2',
                        pid: '05',
                        children: []
                    }
                ]
            },
            {
                id: '06',
                lable: '运维leader',
                pid: '01',
                children: [
                    {
                        id: '15',
                        lable: '运维工程师',
                        pid: '06',
                        children: []
                    }
                ]
            }
        ]
    }
]
function toTree(data) {
    // 1.定义最外层的数组
    const tree = []
    // 2.定义一个空对象
    const otherObj = {}
    // 3.遍历数组内所有对象
    data.forEach(item => {
        // 3.1.给每个当前对象添加一个 children 属性, 以便存放子级对象
        item.children = []
        // 3.2 将当前对象的 id 作为键, 与当前对象自身形成键值对
        otherObj[item.id] = item
    })

    // 4.再次遍历数组内所有对象
    data.forEach(item => {
        // 4.1.判断每个当前对象的 pid, 如当前对象 pid 不为空, 则说明不是最上级的根对象
        if (item.pid) {
            // 4.3.利用当前对象的 otherObj[pid] 找到 otherObj[id] 中对应当前对象的父级对象,
            //  将当前对象添加到其对应的父级对象的 children 属性中
            otherObj[item.pid].children.push(item)
        } else {
            // 4.3.当前对象 pid 如果为空, 则为树状结构的根对象
            tree.push(item)
        }
    })
    // 5.返回树状结构
    return tree
}

console.log(toTree(data))
console 命令行工具 X clear

                    
>
console