将数组列表数据转化成树形结构

110 阅读1分钟

image-20200721010931214.png

const arr1 = [
  { id: 1, name: '部门1', pid: 0 }, // 根节点
  { id: 2, name: '部门2', pid: 1 },
  { id: 3, name: '部门3', pid: 1 },
  { id: 4, name: '部门4', pid: 3 },
  { id: 5, name: '部门5', pid: 4 },
  { id: 6, name: '部门6', pid: 0 } // 根节点
]

方法一:

  1. 将列表型的数据转化成树形数据 => 递归算法 => 自身调用自身 => 一定条件不能一样, 否则就会死循环
  2. 遍历树形 有一个重点 要先找一个头儿
export function tranListToTreeData(list, rootValue) {
  var arr = []
  list.forEach(item => {
    if (item.pid === rootValue) {
      // 找到之后 就要去找 item 下面有没有子节点
      const children = tranListToTreeData(list, item.id)
      if (children.length) {
        // 如果children的长度大于0 说明找到了子节点
        item.children = children
      }
      arr.push(item) // 将内容加入到数组中
    }
  })
  return arr
}

方法二

function listToTree(list, pid, tree) {
 
// 1. 先找第一层级的部门
 
list.forEach((item) => {
 
// pid 0 === id 0
 
// pid动态变
 
// pid = 0 => 根节点
 
// pid = 1 找的是obj id=1部门的子节点 要把结果push到obj.children
 
// pid = 2 找的是obj2 id=2部门的子节点 要把结果push到obj2.children
 
// 找到根节点
 
if (item.pid === pid) {
 
tree.push(item) // 把儿子放到传入数组中
 
}
 
})
 
// ------------------
 
// 2. 根节点找儿子
 
tree.forEach((i) => {
 
i.children = [] // 定义一个数组接收儿子
 
// 找儿子
 
listToTree(list, i.id, i.children) // 找到的结果要放在 i.children
 
})
 
return tree // 返回是根节点
 
}