玩转Element-UI，树形结构怎么转？

Element中的Tree 树形控件，需要特定的数据结构（树形结构），如何将原始数据转化为树形结构？

现有需求如下：

将如下数据结构

没有children子项的顶点数据，pid值为空

没有children子项的顶点数据，pid值为空

作为children子项的数据，pid值和父级的id值保持一致

转化为Element-UI中Tree 树形控件所需要的树形结构

一、建立映射关系，并给每个元素补充children属性

目的：通过id快速查找对应的元素,list为传入的数组

    //建立映射关系
 const map = {}
    //遍历传入的数组
 list.forEach((item) => {
    //若该数组没有children属性，则创建children属性为空数组
   if (!item.children) {
     item.children = []
   }
   // 将数组内id属性充当数组下标传入map数组中
   map[item.id] = item
 })

得到的数据的结构为：

二、遍历传入的数组，判断数据层级

目的：通过查找pid值来判断是否为顶点数据,list为传入的数组

    // 生成最终的树形结构
  const treeList = []
  list.forEach((item) => {
    //只有非顶点数据才有pid值
    //
    const parent = map[item.pid]
    // 如果存在上级则表示item不是最顶层的数据
    if (parent) {
      // 二级数据对象
      parent.children.push(item)
      // 如果不存在上级 则是顶层数据,直接添加
    } else {
      // 一级数据对象
      treeList.push(item)
    }
  })