js 实现将扁平化数据转换为渲染树形结构所需的数据

Posted 2021-09-04 monkeyfly007

/*
 * @Description: 
 * @version: 0630
 * @Author: YaoPengFei582
 * @Date: 2021-06-30 16:27:17
 * @LastEditors: YaoPengFei582
 * @LastEditTime: 2021-06-30 17:55:12
 */
const flatTree = [
  { id: "1-1", label: "1-1级", parentId: "1" },
  { id: "2-1", label: "2-1级", parentId: "2" },
  { id: "3-1", label: "3-1级", parentId: "3" },
  { id: "1-2", label: "1-2级", parentId: "1" },
  { id: "2-2", label: "2-2级", parentId: "2" },
  { id: "3-2", label: "3-2级", parentId: "3" },
  { id: "1-3", label: "1-3级", parentId: "1" },
  { id: "2-3", label: "2-3级", parentId: "2" },
  { id: "3-3", label: "3-3级", parentId: "3" },
  { id: "1", label: "1级", parentId: "" },
  { id: "2", label: "2级", parentId: "" },
  { id: "3", label: "3级", parentId: "" },
  { id: "1-1-1", label: "1-1-1级", parentId: "1-1" },
  { id: "2-1-1", label: "2-1-1级", parentId: "2-1" },
  { id: "3-1-1", label: "3-1-1级", parentId: "3-1" },
]

const resultTree = [
  {
    id: \'1\',
    parentId: "",
    label: "1级",
    children: [
      {
        id: "1-1", label: "1-1级", parentId: "1", children: [
          { id: "1-1-1", label: "1-1-1级", parentId: "1-1", children: [] },
          { id: "1-1-2", label: "1-1-2级", parentId: "1-1", children: [] },
        ]
      },
      {
        id: "1-2", label: "1-2级", parentId: "1", children: []
      },
    ]
  }, {
    id: \'2\',
    parentId: "",
    label: "2级",
    children: []
  }, {
    id: \'3\',
    parentId: "",
    label: "3级",
    children: []
  },
]

const firstLevelTree = flatTree.filter(node => !node.parentId)
firstLevelTree.forEach(node => {
  node.children = getChildNodeList(node.id, flatTree)
})

// 递归调用创建 ChildNodeList
function getChildNodeList(id, tree) {
  const childNodeList = tree.filter(node => node.parentId === id)
  return childNodeList.map(childNode => {
    return {
      ...childNode,
      children: getChildNodeList(childNode.id, tree)
    }
  })
}
console.log(\'firstLevelTree\', firstLevelTree)

转换后的结果：

const result = [
  {
    "id": "1",
    "label": "1级",
    "parentId": "",
    "children": [
      {
        "id": "1-1",
        "label": "1-1级",
        "parentId": "1",
        "children": [
          {
            "id": "1-1-1",
            "label": "1-1-1级",
            "parentId": "1-1",
            "children": []
          }
        ]
      },
      {
        "id": "1-2",
        "label": "1-2级",
        "parentId": "1",
        "children": []
      },
      {
        "id": "1-3",
        "label": "1-3级",
        "parentId": "1",
        "children": []
      }
    ]
  },
  {
    "id": "2",
    "label": "2级",
    "parentId": "",
    "children": [
      {
        "id": "2-1",
        "label": "2-1级",
        "parentId": "2",
        "children": [
          {
            "id": "2-1-1",
            "label": "2-1-1级",
            "parentId": "2-1",
            "children": []
          }
        ]
      },
      {
        "id": "2-2",
        "label": "2-2级",
        "parentId": "2",
        "children": []
      },
      {
        "id": "2-3",
        "label": "2-3级",
        "parentId": "2",
        "children": []
      }
    ]
  },
  {
    "id": "3",
    "label": "3级",
    "parentId": "",
    "children": [
      {
        "id": "3-1",
        "label": "3-1级",
        "parentId": "3",
        "children": [
          {
            "id": "3-1-1",
            "label": "3-1-1级",
            "parentId": "3-1",
            "children": []
          }
        ]
      },
      {
        "id": "3-2",
        "label": "3-2级",
        "parentId": "3",
        "children": []
      },
      {
        "id": "3-3",
        "label": "3-3级",
        "parentId": "3",
        "children": []
      }
    ]
  }
]