源数据:
{
id: 1,
name: "Node 1",
children: [
{
id: 2,
name: "Node 1.1",
children: [],
},
{
id: 3,
name: "Node 1.2",
children: [
{
id: 4,
name: "Node 1.1", // 与上面的Node 1.1同名
children: []
}
]
}
]
},
{
id: 5,
name: "Node 2",
children: [
{
id: 6,
name: "Node 2.1",
children: []
},
{
id: 7,
name: "Node 2.1", // 与上面的Node 2.1同名,但位于不同层级
children: []
}
]
}
];
方法:
const result = {};
function traverse(nodes) {
nodes.forEach(node => {
if (!result[node.name]) {
result[node.name] = [];
}
result[node.name].push(node);
if (node.children && node.children.length > 0) {
traverse(node.children);
}
});
}
traverse(tree);
return result;
}
// 使用示例
const classifiedNodes = classifyByName(treeData);
console.log(classifiedNodes);
// 输出: 一个对象,其中每个键是一个唯一的name,值是具有该name的所有节点的数组
根据上面案例,运用到项目中,根据不同情况进行修改如下:
调用方法:
// 切换作战力量和通信力量
tabSelect(nv) {
this.resourceData = []
// 假设原始数据为 allTreeData
if (nv == 1) {
this.resourceData = this.allTreeData;
} else {
const classifiedNodes = this.classifyByName(this.allTreeData);
this.resourceData = classifiedNodes;
console.log('classifiedNodes------------', this.resourceData);
}
},
}
封装方法:
classifyByName(tree) {
const result = {};
function traverse(nodes) {
nodes.forEach(node => {
if (node.atttibuteValue !== '') {
const filteredUsers = JSON.parse(node.atttibuteValue).filter(obj => obj.label === '资源类型');
if (filteredUsers.length > 0) {
if (!result[filteredUsers[0].typeValue]) {
result[filteredUsers[0].typeValue] = [];
}
// else {
// let obj = {
// atttibuteValue: node.atttibuteValue,
// children: [],
// nodeName: node.nodeName,
// parentId: node.parentId,
// templetId: node.templetId,
// nodeId: node.nodeId,
// }
// result[filteredUsers[0].typeValue].push(obj);
// }
let obj = {
atttibuteValue: node.atttibuteValue,
children: [],
nodeName: node.nodeName,
parentId: node.parentId,
templetId: node.templetId,
nodeId: node.nodeId,
}
result[filteredUsers[0].typeValue].push(obj);
}
}
if (node.children && node.children.length > 0) {
traverse(node.children);
}
});
}
traverse(tree);
console.log('result', result)
return result;
},