敲黑板！！敲黑板！！

问题：后端给我们的数据确实平铺的数组结构该怎么办？

办法1：把后端 打 一顿然后然他重新写。

办法2 ：打 不过自己写

平铺数组结构： const arr = [ { id: 29, pid: , name: 总裁办 }, { id: 2c, pid: , name: 财务部 }, { id: 2d, pid: 2c, name: 财务核算部}, { id: 2f, pid: 2c, name: 薪资管理部}, { id: d2, pid: , name: 技术部}, { id: d3, pid: d2, name: Java研发部} ] Tree 树形控件需要的树状结构： const arr1 = [ { id: 29, pid: , name: 总裁办,children: [] }, { id: 2c, pid: , name: 财务部, children:[ { id: 2d, pid: 2c, name: 财务核算部,children: []}, { id: 2f, pid: 2c, name: 薪资管理部,children: []}, ] }, { id: d2, pid: , name: 技术部, children: [ { id: d3, pid: d2, name: Java研发部,children: []} ]}, ]

把平铺数组结构处理为树状结构

1.1.使用非递归方法 （我这里是封装好的复制可以直接使用）

/**
 * 把平铺的数组结构转成树形结构
 *
 * [
 *  {id:"01", pid:"",   "name":"老王" },
 *  {id:"02", pid:"01", "name":"小张" }
 * ]
 * 上面的结构说明： 老王是小张的上级
 */
export function tranListToTreeData(list) {
  // 1. 定义两个变量
  const treeList = [], map = {}

  // 2. 建立一个映射关系，并给每个元素补充children属性.
  // 映射关系: 目的是让我们能通过id快速找到对应的元素
  // 补充children：让后边的计算更方便
  list.forEach(item => {
    if (!item.children) {
      item.children = []
    }
    map[item.id] = item
  })

  // 循环
  list.forEach(item => {
    // 对于每一个元素来说，先找它的上级
    //    如果能找到，说明它有上级，则要把它添加到上级的children中去
    //    如果找不到，说明它没有上级，直接添加到 treeList
    const parent = map[item.pid]
    // 如果存在上级则表示item不是最顶层的数据
    if (parent) {
      parent.children.push(item)
    } else {
      // 如果不存在上级 则是顶层数据,直接添加
      treeList.push(item)
    }
  })
  // 返回
  return treeList
}

1.2.使用递归方法

// * 数组转树  递归求解
        //  */
        function toTree(list,pid = ){
          let treeList = []
          treeList = list.filter(item => {
            return item.pid === pid            
          })
          treeList.forEach(item=>{
              item.childen=toTree(list,item.id)
          })
          return treeList
        }

3.使用封装的函数（选择一个使用即可）

async loadDepartments() {
      const res = await getDepartments()
      console.log(res)
      // 调用封装的转换函数
      this.list = tranListToTreeData(res.data.depts)
      // this.list = toTreeres.data.depts)
    }