把平铺数据转换成树形结构

最新推荐文章于 2023-04-22 23:43:57 发布

璐瑶知码li

最新推荐文章于 2023-04-22 23:43:57 发布

阅读量291

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq_49464155/article/details/130078467

版权

文章介绍了如何将平铺数据转换为适用于antd4Tree组件的嵌套children结构，提供了一个名为`toTree`的函数示例，以及在使用TreeSelect时，如何利用`treeDataSimpleMode`属性简化数据处理。

摘要由CSDN通过智能技术生成

1. 使用antd4的Tree组件，Tree不支持平铺数据，需要自己转换成children套children的数据，使用以下方法

const toTree = (nodes) => {
  if (!Array.isArray(nodes)) {
    return []
  }
  const node = cloneDeep(nodes)
  node.forEach(item => delete item.children)
  // 定义对象保存数据
  const map = {}
  node.forEach(item => {
     map[item.id] = item
  })

  const newNode = []
  node.forEach(dt => {
    const parents = map[dt.pid]
    if (map[dt.id]) {
      // 看是否还存在子节点
      const findIndex = node.findIndex(
        item => item.pid === dt.id
      )
      // 不存在子节点把isLeaf设置成true
      if (findIndex === -1) {
        newdt.isLeaf = true
      }

      if (parents) {
        ; (parents.children || (parents.children = [])).push(dt)
      } else {
        newNode.push(dt)
      }
    }
  })

  return newNode
}

2. 若是使用antd的TreeSelect组件，可以使用treeDataSimpleMode属性