let treeData= [
{
id: "1",
parentId: "",
text: "高中",
children: [
{
id: '1-1',
parentId: '1',
text: "高一",
children: [
{
id: '1-1-1',
parentId: '1-1',
text: "高一(1)班",
children: []
},
{
id: '1-1-2',
parentId: '1-1',
text: "高一(2)班",
children: []
}
]
},
{
id: '1-2',
parentId: '1',
text: "高二",
children: [
{
id: '1-2-1',
parentId: '1-2',
text: "高二(1)班",
children: []
}
]
}
]
},
{
id: "2",
parentId: "",
text: "幼儿园",
children: [
{
id: '2-1',
parentId: '2',
text: "大班",
children: []
},
{
id: '2-2',
parentId: '2',
text: "中班",
children: []
},
{
id: '2-3',
parentId: '2',
text: "小班",
children: []
}
]
}
]
1. Traverse all child elements of the last level
findChildrens(list, level = 0) {
let arr = [];
if (level >= 1000) {
return arr;
}
level++;
for (const item of list) {
if (item.children && item.children.length>0) {
arr = arr.concat(findChildrens(item.children, level));
} else {
arr.push(item);
}
}
return arr;
}
let result = findChildren(treeData);
结果:[ {text:'高一(1)班',...} ,{text:'高一(2)班',...},{text:'高二(1)班',...},{text:'大班',...},{text:'中班',...},{text:'小班',...}]
2. Query yourself according to id
function findSelfById(list, id, level = 0) {
if (level >= 1000) {
return;
}
level++;
let treeSign;
for (const item of list) {
if (item.id === id) {
return item;
} else if (!item.children) {
continue;
}
treeSign = findSelfById(item.children, id, level);
if (treeSign) {
return treeSign;
}
}
}
let sign = findSelfById(treeData, '1-1-1');
结果:{text:'高一(1)班',...}
3. Query all parent elements of child nodes according to id
4. Query all child elements according to the parent element id
findParentById(arr, id) {
var pList = [];
if (arr.length == 0) {
return pList;
}
let rev = (data, nodeId) => {
for (var i = 0, length = data.length; i < length; i++) {
let node = data[i];
if (node.id == nodeId) {
pList.unshift({ ...node });
rev(arr, node.parentId);
break;
} else {
if (node.children) {
rev(node.children, nodeId);
}
}
}
return pList;
};
pList = rev(arr, id);
return pList;
}
let list=findParentById(this.treeData, '1-1-1')
结果:[{text:'高中',...},{text:'高一',...},{text:'高一(1)班',...}]
5. Traverse the tree and update the field name
formatTree(arr, level) {
if (level >= 1000) {
return;
}
level++;
return arr.map(ele => {
let val = {
value: ele.id,
label: ele.text,
}
if (ele.children.length > 0) {
val.child = this.formatTree(ele.children, level)
}
return val
})
}
let newTree=formatTree(treeData)
结果:属性结构字段:id-value,text-label, children-child