vue如何把一个数组转为树形结构( 把相同的父节点parentId合并children中)

本文链接：https://blog.csdn.net/weixin_42711805/article/details/129197864

该代码段展示了一个JavaScript函数，用于将具有parentId属性的数组转换成树形结构。函数通过迭代数组并递归地查找子节点，然后添加到对应的父节点children中。数据源包含多个具有name、parentId、id等属性的对象，表示菜单结构。

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

/**
 * 数组转树形结构
 * @param list 源数组
 * @param tree 树
 * @param parentId 父ID
 */
const listToTree = (list, tree, parentId) => {
  list.forEach(item => {
    // 判断是否为父级菜单
    if (item.parentId === parentId) {
      const child = {
        ...item,
        key: item.key || item.name,
        children: []
      }
      // 迭代 list， 找到当前菜单相符合的所有子菜单
      listToTree(list, child.children, item.id)
      // 删掉不存在 children 值的属性
      if (child.children.length <= 0) {
        delete child.children
      }
      // 加入到树中
      tree.push(child)
    }
  })
}

数据源，把相同的父节点parentId合并children中

  const nav = [
    {
      name: 'WorkBench',
      parentId: 0,
      id: 100,
      meta: {
        title: '工作台',
        icon: 'appstore',
        show: true
      },
      component: 'WorkBench'
    },
    {
      name: 'TaskCenter',
      parentId: 0,
      id: 200,
      meta: {
        title: '任务中心',
        icon: 'clock-circle',
        show: true
      },
      component: 'TaskCenter'
    },
    {
      name: 'ParameterManagement',
      parentId: 0,
      id: 300,
      meta: {
        title: '标题1',
        icon: 'box-plot',
        show: true
        // hideChildren: true
      },
      component: 'RouteView',
      redirect: '/ParameterManagement/InterfaceManagement'
    },
    {
      name: 'InterfaceManagement',
      parentId: 300,
      id: 301,
      meta: {
        title: '接口管理',
        icon: 'align-left',
        show: true
      },
      component: 'InterfaceManagement'
    },
    {
      name: 'DatabaseManagement',
      parentId: 300,
      id: 302,
      meta: {
        title: '标题',
        icon: 'bar-chart',
        show: true
      },
      component: 'DatabaseManagement'
    },
    {
      name: 'IndicatorLibrary',
      parentId: 0,
      id: 400,
      meta: {
        title: '指标库',
        icon: 'bar-chart',
        show: true
      },
      component: 'IndicatorLibrary'
    }
  ]

使用

// nav数据源，空数组，父节点0
listToTree(nav, [], 0)