假如后端返回的数据结构是里面不包含label,和value字段,此时我们就需要通过递归来遍历出一个带有lable和value字段的树结构,以方便在页面渲染赋值
例如后端返回的树结构为:
let res = [{
"orgid": 1,
"orgname":'研发',
"progid": '001',
'List': [
{
"orgid": 2,
"orgname":'研发1',
"progid": '004',
'List': [
{
"orgid": 3,
"orgname":'研发2',
"progid": '005',
'List':[]
}
]
}
]
},
{
"orgid": 1,
"orgname":'投资',
"progid": '002',
'List': [
{
"orgid": 2,
"orgname":'投资1',
"progid": '006',
'List': [
{
"orgid": 3,
"orgname":'投资2',
"progid": '007',
'List': [
{
"orgid": 4,
"orgname":'投资3',
"progid": '008',
'List':[]
}
]
}
]
}
]
},
{
"orgid": 1,
"orgname":'生产',
"progid": '003',
'List': [
{
"orgid": 2,
"orgname":'生产1',
"progid": '009',
'List': [
{
"orgid": 3,
"orgname":'生产2',
"progid": '010',
'List': [
{
"orgid": 4,
"orgname":'生产3',
"progid": '011',
'List':[]
}
]
}
]
}
]
}
]
### 深度遍历后端返回的树结构:
function deepTreeData (treeData) {
let arr = [];
let obj = {};
treeData.forEach( item => {
if( Array.isArray(item.List) && item.List.length > 0) {
item.List = deepTreeData (item.List);
obj = {
label:item.orgname,
value: item.progid,
children: item.List
}
}else{
item.List = undefined; // 防止最后一级的叶子节点获取不到数据页面渲染为空的bug
obj = {
label:item.orgname,
value: item.progid,
children: item.List
}
}
arr.push(obj)
})
return arr;
}
// 调用:let newTreeData = deepTreeData (res) 接口获取到想到的字段数结构
![](https://img2022.cnblogs.com/blog/2485085/202203/2485085-20220310123407363-1461054922.png)
### 级联选择器回显:是需要根据当前叶子节点中的value值,找到所有父节点的value值组成一个List<Array>
因此我们需要通过递归找到每一个叶子节点中所有的父节点的value值并组成一个List<Array>
代码实现:
let pathList = [];
function deepData(options, path, pathList) {
options.forEach((item) => {
let currentPath = path.concat([item.value]);
pathList.push(currentPath);
if (item.children && item.children.length > 0) {
deepData(item.children, currentPath, pathList);
}
});
return pathList;
}
//调用 deepTopValueList = deepData(newTreeData, [], pathList);
结果就会得到:deepTopValueList = [
['001'],
['001','004'],
['001','004','005'],
['002'],
['002','007'],
['002','007','008'],
['003'],
['003','009'],
['003','009','010'],
['003','009','010','011'],
]
当我们选中某一条table中的数据时,找到当前选中数据的value值,通过遍历deepTopValueList数据,找到item数组中的最后一项比较,相等的话就返回当前value对应所有的父节点item<Array>
deepTopValueList.forEach( item ) {
if( item[item.length - 1] == value) {
return item
}
}