VUE 扁平化数据结构转换为 el-tree 树结构数据 方法封装

VUE 扁平化数据结构转换为 el-tree 树结构数据 方法封装

//1.创建一个空数组来存储组装后的树形结构数据
//2.遍历扁平化数据结构，对于每个节点：
//(1)如果该节点没有父节点，则将其添加到根节点数组中
//(2)如果该节点有父节点，则在树形结构中找到该父节点，并将该节点添加到父节点的 children 属性中
//3.返回组装好的树形结构数据
//下面是一个示例方法：
function flatToTree(flatData, idProp, parentIdProp) {
  const treeData = []
  const idMap = {}

  // 将所有节点存储到 idMap 中，方便快速查找节点
  for (const node of flatData) {
    idMap[node[idProp]] = node
    node.children = []
  }

  // 遍历所有节点，将它们添加到树形结构中
  for (const node of flatData) {
    const parent = idMap[node[parentIdProp]]
    if (parent) {
      parent.children.push(node)
    } else {
      treeData.push(node)
    }
  }

  return treeData
}

//参数说明：

//flatData：扁平化数据结构数组。
//idProp：节点 ID 属性名。
//parentIdProp：节点父 ID 属性名。

//示例
const flatData = [
  { id: 1, name: 'Node 1', parentId: null },
  { id: 2, name: 'Node 1.1', parentId: 1 },
  { id: 3, name: 'Node 1.2', parentId: 1 },
  { id: 4, name: 'Node 1.1.1', parentId: 2 },
  { id: 5, name: 'Node 2', parentId: null },
]

const treeData = flatToTree(flatData, 'id', 'parentId')
console.log(treeData)

//输出
[
  {
    "id": 1,
    "name": "Node 1",
    "parentId": null,
    "children": [
      {
        "id": 2,
        "name": "Node 1.1",
        "parentId": 1,
        "children": [
          {
            "id": 4,
            "name": "Node 1.1.1",
            "parentId": 2,
            "children": []
          }
        ]
      },
      {
        "id": 3,
        "name": "Node 1.2",
        "parentId": 1,
        "children": []
      }
    ]
  },
  {
    "id": 5,
    "name": "Node 2",
    "parentId": null,
    "children": []
  }
]
//可以看到，输出的结果是符合 Vue 中 el-tree 树结构数据格式的。

//其他参考方法


//方法 递归实现
//递归是一种简单但非常强大的算法，可以用于将扁平化数据结构转换为树形结构。具体实现步骤如下：

//创建一个空数组，用于存储根节点。
//遍历扁平化数据结构，取出每个节点进行处理。
//如果当前节点的父节点ID为空，则代表当前节点是根节点，将其添加到根节点数组中。
//如果当前节点的父节点ID不为空，则查找该父节点，将当前节点添加到该父节点的子节点数组中。
//递归处理当前节点的子节点，直到遍历完所有节点。
//示例代码如下：
function toTree(data) {
  const result = []
  const map = {}

  data.forEach(item => {
    item.children = []
    map[item.id] = item
  })

  data.forEach(item => {
    if (item.parentId === null) {
      result.push(item)
    } else {
      const parent = map[item.parentId]
      parent.children.push(item)
    }
  })

  return result
}

//方法 迭代实现
//迭代方法是使用循环来实现树形结构转换的方式。与递归相比，迭代更容易理解和调试，但也需要更多的代码。

//具体实现步骤如下：

//创建一个空数组，用于存储根节点。
//遍历扁平化数据结构，将每个节点添加到节点映射表中。
//再次遍历扁平化数据结构，查找每个节点的父节点，并将其添加到对应的子节点数组中。
//最后遍历节点映射表，将根节点添加到结果数组中。
//示例代码如下：
function toTree(data) {
  const result = []
  const map = {}

  data.forEach(item => {
    item.children = []
    map[item.id] = item
  })

  data.forEach(item => {
    const parent = map[item.parentId]
    if (parent !== null) {
      parent.children.push(item)
    } else {
      result.push(item)
    }
  })

  return result
}