数组转树

在工作中处理类似于公司结构的时候 , 如果后端没有将数据处理好 , 而直接给了初始数据 , 那么就需要自己做转换.

例如:

let arr = [
    {id: 1, name: '部门1', pid: 0},
    {id: 2, name: '部门2', pid: 1},
    {id: 3, name: '部门3', pid: 1},
   
]

父id下面有两个子id,遇到这种情况需要用到函数的递归

[
    {
        "id": 1,
        "name": "部门1",
        "pid": 0,
        "children": [
            {
                "id": 2,
                "name": "部门2",
                "pid": 1,
                "children": []
            },
            {
                "id": 3,
                "name": "部门3",
                "pid": 1,
                "children": [
                    // 结果 ,,,
                ]
            }
        ]
    }
]

//将数组转换为树   
function transArrToTree(list , value){  //1.需要两个参数,第一将数组传进去,第二个作为判断条件
    const newArr = []          //2.声明一个空数组用来存储改变后的值
    list.forEach(item=>{       //3.对传入的数组进行遍历
        if(item.id ===value){  //4.如果数组中的id(父id)与判断条件相同,就存入数组中
        const children = transArrToTree(list , item.pid) //8.函数内部再次调用自己
                               //9.children是结果要求的相匹配结果,用item.children添加一个children属性
        item.children = children   //10.将children添加到父组件内部
                               //如果是很多数据,可以加一个判断,因为有的部门没有子部门                  
        arr.push(item)         //5.添加进数组
        }
    })
    return  newArr           //6.将新的到的数组返回,得到[{id: 1, name: '部门1', pid: 0}]
                             //7.通过观察数组可以知道,父部们的id就是子部门的父id(pid),
                             //那么只需在父部门的数组中添加子部门,同样通过子部门(pid)与父部们(id)比较
}

transArrToTree(arr , 1)     //将整个数组传进去,父部们的id作为判断条件

此时就会得到上面的树状数组,在通过elelment的tree组件渲染上去就可以看到完整的部门结构.