做管理后台遇到了一个需求，是要再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
