标签：const 转化成 treeData pid 前端 list item 数组 children

背景

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

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

 

这样的数据可以直接在 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。