递归遍历数组数据，转化为树形数据的方法。

需求：

把从后端请求的数组据数据转化成树形结构数据，用以使用element ui的树形组件渲染。

这是从后端获取到的数据

// 后端获取的数组数据
 depts: [
        {
          id: '1',
          pid: '',
          name: '总裁办',
          manager: '曹操'
        },
        {
          id: '2',
          pid: '1',
          name: '董事会',
          manager: '曹丕'
        },
        {
          id: '3',
          pid: '2',
          name: '经理部',
          manager: '司马懿'
        },
        {
          id: '4',
          pid: '',
          name: '行政部',
          manager: '刘备'

        },
        {
          id: '5',
          pid: '',
          name: '人事部',
          manager: '孙权'
        }
      ],

这是我们想要得到的树形数据结构。

      departs: [
        {
        name: '总裁办',
        manager: '曹操',
        children: [
          {
            name: '董事会',
            manager: '曹丕',
            children: [{ name: '经理部', manager: '司马懿' }]
          }
        ]
        },
        { name: '行政部', manager: '刘备' },
        { name: '人事部', manager: '孙权' }
      ],

分析

我们可以发现，子部门的pid和父部门的id相等，因此可以封装一个递归函数来循环遍历数据。
返回值便是我们需要的数据结构。

// 将列表型的数据转化成树形数据
// 我们需要传入两个参数，要转化的数据和顶层节点的id
export function tranListToTreeData(list, rootValue) {
  var arr = []
  list.forEach(item => {
    if (item.pid === rootValue) {
      const children = tranListToTreeData(list, item.id) // 找到之后 就要去找 item 下面有没有子节点
      if (children.length) {
        item.children = children  // 如果children的长度大于0 说明找到了子节点
      }
      arr.push(item) // 将内容加入到数组中
    }
  })
  return arr // 返回新数组
}

接下来我们就可以在组件中使用了

<!-- 通过element-ui的树形组件循环渲染 -->
<el-tree :data="departs" :props="defaultProps" :default-expand-all="true">
	<!-- 作用域插槽 -->
	<tree-tools slot-scope="{ data }" :tree-node="data"/>
</el-tree>

// 数据转化
this.departs = tranListToTreeData(this.departs, '')

---

效果：

大功告成