背景

后端接口返回的数据一般是平铺扁平的数组结构，而不会是树形结构

例如下面的平铺数组结构：

 

这样的数据可以直接在 table 中使用，但是不能直接在 tree 组件中使用，需要我们转换成树形控件数据

 

 分析

1. 查找数据的对应关系

   • 负责人的 id 是 下属的 pid

2. 分析树形控件需要的数据结构

   • 参考下面代码中的最终数据格式

3. 实现方案：

   • 多个循环

   • 递归

   • 其他

实现

filter 方法

function arrToTree(list) {
  // 定义一个需要存放的树行结构的数据
  const treeData = []
  // 对传入的数据进行遍历
   list.forEach (item => {
    // 查看是否的pid值,如果没有就是顶级,直接添到treeData中
    if(!item.pid) {
      treeData.push(item)
    }
    // 查看子级 子级需要和list中每一项进行对比
    // 对比关系 : 每一项的pid是否等于当前项的id
    const children = list.filter(data => data.pid === item.id)
    // 查看children是否存在子级,如果没有,不能做任何处理
    if(!children.length) return
    // 如果children 有数据, 就应该吧数据赋值当父级
    item.children = children

   })
   return treeData

  
  }
  const treeData = arrToTree(data)
  console.log(treeData);

递归(拓展写法)

  /**
     * list 是需要遍历的扁平数组
     * rootValue 顶级节点
     * */
    function arrToTree(list, rootValue) {
      // 最终需要返回的树行结构数据
      const treeData = []

      // 开始对 list 扁平数据进行遍历
      list.forEach(item => {
        // 先查找最顶级，从最顶级往下进行查找
        if (item.pid === rootValue) {
          // 查找子级：需要和扁平数组中的每一项进行对比
          // 子级的 pid 等于 父级 的 id
          const children = arrToTree(list, item.id)

          // 查看 children 是否有子级
          if (children.length) {
            item.children = children
          }

          treeData.push(item)
        }
      })

      return treeData
    }

    // 目标：
    const treeData = arrToTree(data, '')
    console.log(treeData)

递归比较绕,下面是递归的思路图

 

标签：const,转化成,treeData,pid,前端,list,item,数组,children
来源： https://blog.csdn.net/ZYR_JS/article/details/121055772