oa项目中tree数据处理

实现效果如下图：

代码展示如下：

// 将一个平铺的数组变成树形的结构
export function transToTreeData(list) {
  const treeList = []
  // 编写处理逻辑
  // 1. 先以list中的每一项的id值作为对象的key  没一项作为value 形成一个对象结构
  const map = {}
  list.forEach(item => {
    // 每一项都添加一个chilren属性
    if (!item.children) {
      item.children = []
    }
    map[item.id] = item
  })

  console.log(map)
  // 2.遍历list
  // 通过pid 去map里key找  如果能找到 代表有父项  把自己添加到父项的chilren属性即可
  // 如果找不到 代表自己本身就是父节点
  list.forEach((item) => {
    if (map[item.pid]) {
      // 可以匹配
      map[item.pid].children.push(item)
    } else {
      // 匹配不到 就把当前项直接扔到将来要产出的treelist里面
      treeList.push(item)
    }
  })

  // 返回值
  return treeList
}

核心点：

利用了对象数组引用类型的特点 也就是在任何一个使用引用类型数据的位置都可以同时对数据进行修改
并且一处修改之后其它的引用位置也会同步改变|