将数据处理为Tree树形数据

当我们使用element组件库的Tree组件时，我们需要一个树形数据才能进行渲染

const arr = [
  { id: '01', name: '张大大 项目经理', pid: '', job: '项目经理' },
  { id: '02', name: '小亮   产品leader', pid: '01', job: '产品leader' },
  { id: '03', name: '小美', pid: '01', job: 'UIleader' },
  { id: '04', name: '老马   技术leader', pid: '01', job: '技术leader' },
  { id: '05', name: '老王   测试leader', pid: '01', job: '测试leader' },
  { id: '06', name: '老李   运维leader', pid: '01', job: '运维leader' },
  { id: '07', name: '小丽   产品经理', pid: '02', job: '产品经理' },
  { id: '08', name: '大光   产品经理', pid: '02', job: '产品经理' },
  { id: '09', name: '小高   UI设计师', pid: '03', job: 'UI设计师' },
  { id: '10', name: '小刘   前端工程师', pid: '04', job: '前端工程师' },
  { id: '11', name: '小华   后端工程师', pid: '04', job: '后端工程师' },
  { id: '12', name: '小李   后端工程师', pid: '04', job: '后端工程师' },
  { id: '13', name: '小赵   测试工程师', pid: '05', job: '测试工程师' },
  { id: '14', name: '小强   测试工程师', pid: '05', job: '测试工程师' },
  { id: '15', name: '小涛   运维工程师', pid: '06', job: '运维工程师' },
  { id: '16', name: '小才   运维工程师', pid: '07', job: '运维工程师' },
]

function tranTreeData(sourceData) {
  // 最终要产出的数组,是一个树形的结构
  const treeList = []
  // 所有项都使用对象存储起来
  const obj= {}//每一个对象

// 先遍历原数组 以原数组中的每一项的id作为对象的key, 每一项本身作为对象的value形成一个对象结构(obj)
  sourceData.forEach(item => {//是一个对象  { id: '16', name: '小才   运维工程师', pid: '07', job: '运维工程师' }
    if (!item.children) {//对象里面无children节点
      item.children = []
    }
    //如果有children节点
    obj[item.id] = item//将item的id作为obj的属性， obj[item.id]的值就是对于id的item对象
    //obj[16]= { id: '16', name: '小才   运维工程师', pid: '07', job: '运维工程师' }
       // console.log(obj[item.id])
  })

//遍历原数组 使用数组中的每一项的pid 去第一步形成的obj结构去匹配key(id) 如果匹配上
// 1、就把当前项放入找到节点的children属性中去  如果无法完成匹配 代表当前项就是最根上的父节点
  
  sourceData.forEach(item => {// { id: '16', name: '小才   运维工程师', pid: '07', job: '运维工程师' }
    const parent = obj[item.pid]//将pid的值作为item的属性 obj[07]={ id: '07', name: '小丽   产品经理', pid: '02', job: '产品经理' }
    // console.log(parent)
    // 如果存在则表示item不是最顶层的数据
    if (parent) {
      if (!parent.children) {
        parent.children = []
      }
      parent.children.push(item)//第几层
    } else {
      // 如果不存在 则是顶层数据
      treeList.push(item)//第一层
    }
  })
  // 返回出去
  // 2，那就把当前项直接放到最终产出的treeList中去
  return treeList
  // js复杂类型 存储的是内存的指针  一处修改 另外一处也会同步更新
}

变成这样一个有层级关系的数据