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
}

核心点:

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

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值