数组对象转换成树形结构如何在vue中封装复用

在工作中我们经常会遇到数组转为树形对象的需求，那么如何实现呢？

// 例如 data是后端返回来的一组数据，我们使用中需要将它转化为树形对象。
    const data = [
      { id: "01", name: "张大大", pid: "", job: "项目经理" },
      { id: "02", name: "小亮", pid: "01", job: "产品leader" },
      { id: "03", name: "小美", pid: "01", job: "UIleader" },
      { id: "04", name: "老马", pid: "01", job: "技术leader" },
      { id: "05", name: "老王", pid: "01", job: "测试leader" },
      { id: "06", name: "老李", pid: "01", job: "运维leader" },
      { id: "07", name: "小丽", pid: "02", job: "产品经理" },
      { id: "08", name: "大光", pid: "02", job: "产品经理" },
      { id: "09", name: "小高", 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: "运维工程师" }
    ]

这个数组转换树形结构需求是通用的（其它的项目可能也会用到的），所以，我们可以封装成工具，单独放在utils下边。

1.创建工具函数

在**src/utils/index.js**文件中，补充一个函数tranListToTreeData，如下：

> /*  把平铺的数组结构转成树形结构   [    {id:"01", pid:"",   "name":"老王" },   
> {id:"02", pid:"01", "name":"小张" }   ]   上面的结构说明： 老王是小张的上级  */

//封装并导出工具函数
export function tranListToTreeData(list) {
  // 最终要产出的树状数据的数组
  const treeList = []
  // 所有项都使用对象存储起来
  const map = {}

  // 建立一个映射关系：通过id快速找到对应的元素
  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
}

2.组件中使用工具函数处理数据

假如我们在departments.vue中，引入函数tranListToTreeData

<script>
 import { tranListToTreeData } from '@/utils'
export default {
 data() {
    return {
     list:[]
    }
  },
 methods: {    
  async loadDepartments() {
//例如getDepartmentAPI是我们的接口地址，我们请求到接口，通过封装好的工具函数，直接就可以处理完成数组转换
        const res = await getDepartmentsAPI()
        console.log(res)
        // 用工具函数把 平铺的数组转成 树型数据,res.data.depts是后台返回的数组
        this.list = tranListToTreeData(res.data.depts)
    }
  }
}   
</script>