平级数据转化树状数据

1. 双forEach方法

<script>
    const arr = [
        {id:"2b",pid:"",name:"人事部"},
        {id:"2c",pid:"",name:"财务部"},
        {id:"2d",pid:"2c",name:"财务核算部"},
        {id:"2e",pid:"2c",name:"税务管理部"},
        {id:"2f",pid:"2c",name:"薪资管理部"},
    ]
     function tranListToTreeData(arr){
     const treeArr =[]
     const map ={}
     arr.forEach(item => {
        item.children=[]
        map[item.id]=item
     });
    //  console.log(map);
    arr.forEach(item=>{
        // 判断是否有上级
        const pItem =map[item.pid]
   
        pItem? pItem.children.push(item) : treeArr.push(item) 
    })
    return treeArr
     }
     const newarr =tranListToTreeData(arr)
     console.log(newarr);
</script>

2. 递归的方法

<script>
   const data = [
        {id:"2b",pid:"",name:"人事部"},
        {id:"2c",pid:"",name:"财务部"},
        {id:"2d",pid:"2c",name:"财务核算部"},
        {id:"2e",pid:"2c",name:"税务管理部"},
        {id:"2f",pid:"2c",name:"薪资管理部"},
    ]

    //使用递归函数 实现树状数据的处理
    function tranListToTreeData(data ,pid="") {
      let arr=[]
      data.forEach(item => {
        // 先找第一级
        if (item.pid===pid) {
          //  找二级数据
          let children =tranListToTreeData(data,item.id)
        //  代码优化 同时将找到的孩子放到父亲的children树形里
        children.length>0 ? item.children=children : false         
          arr.push(item)
        }
      });
      return arr
    }
    console.log(tranListToTreeData(data));
 </script>

3. 导入组件实现(Vue递归组件)

// 1.下载组件(npm i array-to-tree) 

//2.配置文件 导入
import arrayToTree from 'array-to-tree'

export function tranListToTreeData(arr) {
  return arrayToTree(arr, {
    parentProperty: 'pid',
    customID: 'id'
  })
}
//3.导入组件
//4.使用