扁平化数据结构转为Tree结构

82 阅读1分钟
let arr = [
  {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: 5},
  {id: 1, name: '部门1', pid: 0},
  {id: 7, name: '部门7', pid: 1},
  
]

1、数据遍历法

arrTotree(list) {
  const treeArr = []
  list.forEach(item => {
    if (item.pid === 0) {
      treeArr.push(item)
    }
    // 过滤出相同pid相同子集合
    const children = list.filter(obj => obj.pid === item.id)
    if (children.length === 0) return
    item.children = children
  })
  return treeArr
},
用法: arrTotree(arr)

2、递归遍历法

  arrTotree(list, rootValue) {
    const treeArr = []
    list.forEach(item => {
      if (item.pid === rootValue) {
        const children = this.arrTotree(list, item.id)
        if (children.length) {
          item.children = children
        }
        treeArr.push(item)
      }
    })
    return treeArr
},
用法:arrTotree(arr,0) // pid==0为顶级菜单