2022-04-24 js 树状结构 递归获取路径

做管理后台遇到了一个需求，是要再table里显示路径的名字

image.png

如上图所示，但是后端的哥们只返回了每一级的name ，并没有路径。前端能解决的事情就不麻烦后端了，只能用递归解决了：

一、获取每一级中的路径 path

const treeNode = [
  {
    id: '1',
    name: '湖北省',
    children: [
      {
        id: '1-1',
        name: '武汉市',
        children: [
          {
            id: '1-1-1',
            name: '汉阳区',
          },
          {
            id: '1-1-2',
            name: '汉口区',
          }
        ]
      }
    ]
  },
  {
    id: '2',
    name: '湖南省',
    children: [
      {
        id: '2-1',
        name: '长沙市',
        children: [
          {
            id: '2-1-1',
            name: '汉长区',
          },
          {
            id: '2-1-2',
            name: '白白区',
          }
        ]
      }
    ]
  },
]
//递归 设置可选项
    getTreeData(data, parentName = ''){
      data.forEach(item=>{
        let itemName = item.name
        if(parentName){
          itemName = parentName + '/' + item.name
        }
        item.pathName = itemName
        if(item.children && item.children.length > 0){
          this.getDisabledData(item.children, itemName)
        }
      })
    },

如下图可以看到 pathName 就是把路径拼接起来了，该方法同样适用于树状结构添加任意属性字段。

image.png

还有其他几种树状结构常用的递归操作 可以参考该博主文章
https://blog.csdn.net/m0_38134431/article/details/108453055