平铺数组转tree的算法

236 阅读1分钟

工作中,后端给我们的代码是这样的

image.png

可是在工作中我需要的数据是这样的,这个是element.ui中的数据

image.png

思路分析:

    1.一级数据的相同点是pid为''
    2.二级数据和一级数据的相同点是pid和一级数据的id相同
    3.第一步先声明一个空数组
    4.先筛选出一级数据
    5.递归这个函数筛选出二级数据
    6.筛选出二级数据赋值给有二级数据的一级
    7.给arr添加数据并return返回

递归

function toTree(list, value) {
  const arr = []
  list.forEach((item) => {
    if (item.pid === value) {
      const children = toTree(list, item.id)
      if (children.length > 0) {
        item.children = children
      }
      arr.push(item)
    }
  })

  return arr
}

复制代码
描述:由于后端返回的数据是列表型数据,第一次传递的参数是列表数据和"",
因为所有一级部门的pid都为"",这样遍历数组就可以找出所有一级部门,
第二次传递的参数是列表数据和item.id(一级部门的id作为二级部门的子id),
声明一个空数组,每遍历得到一个一级部门就pushdao这个数组中,每遍历一个二级部门,
则给对应的一级部门新增chidren属性,把二级部门数据赋值给这个chidren,
最后返回这个数组,也就是得到了这个树形数组

如下

数据结构

image.png

image.png

 // 封装函数将列表型数据转换成树形数据结构
    // list:要转换的数据
    // value:根数据
    --定义函数
    export function transListToTree(list, value) {
      console.log(list)
      // 声明一个空数组
      const arr = []
      // 循环这个数组
      list.forEach(item => {
        // 筛选
        if (item.pid === value) {
          // 重新调用这个函数
          const children = transListToTree(list, item.id)
          if (children.length > 0) {
            item.children = children
          }
          arr.push(item)
        }
      })
      return arr
    }
    --调用函数
    transListToTree(depts, '')