element Tree 如何把树形结构转换成数组。
需求：点击节点，把树形接口转换成数字展示出来，最终要把点击的数组转换成树形结构传给后端。
最终想要得到的数据1：右边展示数组：
shouList:
[{pArea:"李沧区",school:"青岛十六中路中路第三小学",class:"4.1",num:1},
{pArea:"李沧区",school:"青岛十六中路中路第三小学",class:"4.2",num:1},
{pArea:"城阳区",school:"锦绣小学",class:"1",num:1},
pArea:"城阳区",school:"锦绣小学",class:"2",num:2},
pArea:"城阳区",school:"锦绣小学",class:"3",num:2}]
最终想要得到的数据1转换成tree树形结构传给后端：
"children": [
"label": "李沧区",
"children": [{ "label": "青岛十六中路中路第三小学", "children":[{label:"4.1",num:1},{label:"44.2",num:1}]}]
]
数据： "children": [
{ "label": "城阳区",
"children": [
{
"label": "锦绣小学",
"children": [
{
"label": "1",
"num": 1
},
{
"label": "1、2",
"num": 1
},
{
"label": "2",
"num": 2
},
{
"label": "3",
"num": 4
},
{
"label": "3、4",
"num": 2
},
{
"label": "4",
"num": 1
},
{
"label": "4、5",
"num": 1
},
{
"label": "5",
"num": 5
}
]
},
{
"label": "城阳区夏庄街道夏庄小学",
"children": [
{
"label": "无",
"num": 13
}
]
},
{
"label": "夏庄街道营村小学",
"children": [
{
"label": "1",
"num": 1
},
{
"label": "1-2",
"num": 3
},
{
"label": "2",
"num": 2
}
]
},
{
"label": "程哥庄小学",
"children": [
{
"label": "1",
"num": 5
},
{
"label": "2",
"num": 4
}
]
},
{
"label": "夏庄街道曹村小学",
"children": [
{
"label": "1",
"num": 2
},
{
"label": "1-2",
"num": 6
}
]
},
{
"label": "青岛市城阳区惜福镇街道牟家小学",
"children": [
{
"label": "无",
"num": 7
}
]
},
{
"label": "夏庄街道黄埠小学",
"children": [
{
"label": "1",
"num": 1
},
{
"label": "1-4",
"num": 8
},
{
"label": "2",
"num": 1
},
{
"label": "3",
"num": 1
}
]
},
{
"label": "青岛出口加工区实验小学",
"children": [
{
"label": "1",
"num": 1
},
{
"label": "3",
"num": 2
},
{
"label": "4.1/4.2",
"num": 1
},
{
"label": "4.1/4.2/4.3",
"num": 5
}
]
},
{
"label": "中华埠小学",
"children": [
{
"label": "1",
"num": 4
},
{
"label": "1、2、3",
"num": 2
},
{
"label": "2",
"num": 3
},
{
"label": "2、3",
"num": 2
},
{
"label": "3",
"num": 3
}
]
},
{
"label": "夏庄街道华阴小学",
"children": [
{
"label": "1-2",
"num": 7
}
]
},
{
"label": "环城路小学",
"children": [
{
"label": "1",
"num": 2
},
{
"label": "1，2",
"num": 1
},
{
"label": "1，2,3,4",
"num": 1
},
{
"label": "1，2，3，4",
"num": 1
},
{
"label": "2",
"num": 2
},
{
"label": "2，3,4",
"num": 1
},
{
"label": "3",
"num": 1
},
{
"label": "3，4",
"num": 1
},
{
"label": "4",
"num": 2
}
]
},
]
},
]
回答：
树形转换成数组
数据
let data = [ {
"label": "城阳区",
"children": [
{
"label": "锦绣小学",
"children": [
{
"label": "1",
"num": 1
},
{
"label": "1、2",
"num": 1
},
{
"label": "2",
"num": 2
},
{
"label": "3",
"num": 4
},
{
"label": "3、4",
"num": 2
},
{
"label": "4",
"num": 1
},
{
"label": "4、5",
"num": 1
},
{
"label": "5",
"num": 5
}
]
},
{
"label": "城阳区夏庄街道夏庄小学",
"children": [
{
"label": "无",
"num": 13
}
]
},
{
"label": "夏庄街道营村小学",
"children": [
{
"label": "1",
"num": 1
},
{
"label": "1-2",
"num": 3
},
{
"label": "2",
"num": 2
}
]
},
{
"label": "程哥庄小学",
"children": [
{
"label": "1",
"num": 5
},
{
"label": "2",
"num": 4
}
]
},
{
"label": "夏庄街道曹村小学",
"children": [
{
"label": "1",
"num": 2
},
{
"label": "1-2",
"num": 6
}
]
},
{
"label": "青岛市城阳区惜福镇街道牟家小学",
"children": [
{
"label": "无",
"num": 7
}
]
},
{
"label": "夏庄街道黄埠小学",
"children": [
{
"label": "1",
"num": 1
},
{
"label": "1-4",
"num": 8
},
{
"label": "2",
"num": 1
},
{
"label": "3",
"num": 1
}
]
},
{
"label": "青岛出口加工区实验小学",
"children": [
{
"label": "1",
"num": 1
},
{
"label": "3",
"num": 2
},
{
"label": "4.1/4.2",
"num": 1
},
{
"label": "4.1/4.2/4.3",
"num": 5
}
]
},
{
"label": "中华埠小学",
"children": [
{
"label": "1",
"num": 4
},
{
"label": "1、2、3",
"num": 2
},
{
"label": "2",
"num": 3
},
{
"label": "2、3",
"num": 2
},
{
"label": "3",
"num": 3
}
]
},
{
"label": "夏庄街道华阴小学",
"children": [
{
"label": "1-2",
"num": 7
}
]
},
{
"label": "环城路小学",
"children": [
{
"label": "1",
"num": 2
},
{
"label": "1，2",
"num": 1
},
{
"label": "1，2,3,4",
"num": 1
},
{
"label": "1，2，3，4",
"num": 1
},
{
"label": "2",
"num": 2
},
{
"label": "2，3,4",
"num": 1
},
{
"label": "3",
"num": 1
},
{
"label": "3，4",
"num": 1
},
{
"label": "4",
"num": 2
}
]
},
]
},
];
const treeToArr = (data=[])=>{let res=[];
data.forEach(pArea=>{
pArea.children.forEach(school=>{
school.children.forEach(({label,num})=>{
res.push({pArea:pArea.label,school:school.label,class:label,num:num});
})
})
});
return res;
};
treeToArr(data);
0: {pArea: "城阳区", school: "锦绣小学", class: "1", num: 1}1: {pArea: "城阳区", school: "锦绣小学", class: "1、2", num: 1}
2: {pArea: "城阳区", school: "锦绣小学", class: "2", num: 2}
3: {pArea: "城阳区", school: "锦绣小学", class: "3", num: 4}
4: {pArea: "城阳区", school: "锦绣小学", class: "3、4", num: 2}
5: {pArea: "城阳区", school: "锦绣小学", class: "4", num: 1}
6: {pArea: "城阳区", school: "锦绣小学", class: "4、5", num: 1}
7: {pArea: "城阳区", school: "锦绣小学", class: "5", num: 5}
8: {pArea: "城阳区", school: "城阳区夏庄街道夏庄小学", class: "无", num: 13}
9: {pArea: "城阳区", school: "夏庄街道营村小学", class: "1", num: 1}
10: {pArea: "城阳区", school: "夏庄街道营村小学", class: "1-2", num: 3}
11: {pArea: "城阳区", school: "夏庄街道营村小学", class: "2", num: 2}
12: {pArea: "城阳区", school: "程哥庄小学", class: "1", num: 5}
13: {pArea: "城阳区", school: "程哥庄小学", class: "2", num: 4}
14: {pArea: "城阳区", school: "夏庄街道曹村小学", class: "1", num: 2}
15: {pArea: "城阳区", school: "夏庄街道曹村小学", class: "1-2", num: 6}
16: {pArea: "城阳区", school: "青岛市城阳区惜福镇街道牟家小学", class: "无", num: 7}
17: {pArea: "城阳区", school: "夏庄街道黄埠小学", class: "1", num: 1}
18: {pArea: "城阳区", school: "夏庄街道黄埠小学", class: "1-4", num: 8}
19: {pArea: "城阳区", school: "夏庄街道黄埠小学", class: "2", num: 1}
20: {pArea: "城阳区", school: "夏庄街道黄埠小学", class: "3", num: 1}
21: {pArea: "城阳区", school: "青岛出口加工区实验小学", class: "1", num: 1}
22: {pArea: "城阳区", school: "青岛出口加工区实验小学", class: "3", num: 2}
23: {pArea: "城阳区", school: "青岛出口加工区实验小学", class: "4.1/4.2", num: 1}
24: {pArea: "城阳区", school: "青岛出口加工区实验小学", class: "4.1/4.2/4.3", num: 5}
25: {pArea: "城阳区", school: "中华埠小学", class: "1", num: 4}
26: {pArea: "城阳区", school: "中华埠小学", class: "1、2、3", num: 2}
27: {pArea: "城阳区", school: "中华埠小学", class: "2", num: 3}
28: {pArea: "城阳区", school: "中华埠小学", class: "2、3", num: 2}
29: {pArea: "城阳区", school: "中华埠小学", class: "3", num: 3}
30: {pArea: "城阳区", school: "夏庄街道华阴小学", class: "1-2", num: 7}
31: {pArea: "城阳区", school: "环城路小学", class: "1", num: 2}
32: {pArea: "城阳区", school: "环城路小学", class: "1，2", num: 1}
33: {pArea: "城阳区", school: "环城路小学", class: "1，2,3,4", num: 1}
34: {pArea: "城阳区", school: "环城路小学", class: "1，2，3，4", num: 1}
35: {pArea: "城阳区", school: "环城路小学", class: "2", num: 2}
36: {pArea: "城阳区", school: "环城路小学", class: "2，3,4", num: 1}
37: {pArea: "城阳区", school: "环城路小学", class: "3", num: 1}
38: {pArea: "城阳区", school: "环城路小学", class: "3，4", num: 1}
39: {pArea: "城阳区", school: "环城路小学", class: "4", num: 2}
数组转换成树形
数据
var arr = [{"pArea":"城阳区","school":"锦绣小学","class":"1","num":1},{"pArea":"城阳区","school":"锦绣小学","class":"1、2","num":1},{"pArea":"城阳区","school":"锦绣小学","class":"2","num":2},{"pArea":"城阳区","school":"锦绣小学","class":"3","num":4},{"pArea":"城阳区","school":"锦绣小学","class":"3、4","num":2},{"pArea":"城阳区","school":"锦绣小学","class":"4","num":1},{"pArea":"城阳区","school":"锦绣小学","class":"4、5","num":1},{"pArea":"城阳区","school":"锦绣小学","class":"5","num":5},{"pArea":"城阳区","school":"城阳区夏庄街道夏庄小学","class":"无","num":13},{"pArea":"城阳区","school":"夏庄街道营村小学","class":"1","num":1},{"pArea":"城阳区","school":"夏庄街道营村小学","class":"1-2","num":3},{"pArea":"城阳区","school":"夏庄街道营村小学","class":"2","num":2},{"pArea":"城阳区","school":"程哥庄小学","class":"1","num":5},{"pArea":"城阳区","school":"程哥庄小学","class":"2","num":4},{"pArea":"城阳区","school":"夏庄街道曹村小学","class":"1","num":2},{"pArea":"城阳区","school":"夏庄街道曹村小学","class":"1-2","num":6},{"pArea":"城阳区","school":"青岛市城阳区惜福镇街道牟家小学","class":"无","num":7},{"pArea":"城阳区","school":"夏庄街道黄埠小学","class":"1","num":1},{"pArea":"城阳区","school":"夏庄街道黄埠小学","class":"1-4","num":8},{"pArea":"城阳区","school":"夏庄街道黄埠小学","class":"2","num":1},{"pArea":"城阳区","school":"夏庄街道黄埠小学","class":"3","num":1},{"pArea":"城阳区","school":"青岛出口加工区实验小学","class":"1","num":1},{"pArea":"城阳区","school":"青岛出口加工区实验小学","class":"3","num":2},{"pArea":"城阳区","school":"青岛出口加工区实验小学","class":"4.1/4.2","num":1},{"pArea":"城阳区","school":"青岛出口加工区实验小学","class":"4.1/4.2/4.3","num":5},{"pArea":"城阳区","school":"中华埠小学","class":"1","num":4},{"pArea":"城阳区","school":"中华埠小学","class":"1、2、3","num":2},{"pArea":"城阳区","school":"中华埠小学","class":"2","num":3},{"pArea":"城阳区","school":"中华埠小学","class":"2、3","num":2},{"pArea":"城阳区","school":"中华埠小学","class":"3","num":3},{"pArea":"城阳区","school":"夏庄街道华阴小学","class":"1-2","num":7},{"pArea":"城阳区","school":"环城路小学","class":"1","num":2},{"pArea":"城阳区","school":"环城路小学","class":"1，2","num":1},{"pArea":"城阳区","school":"环城路小学","class":"1，2,3,4","num":1},{"pArea":"城阳区","school":"环城路小学","class":"1，2，3，4","num":1},{"pArea":"城阳区","school":"环城路小学","class":"2","num":2},{"pArea":"城阳区","school":"环城路小学","class":"2，3,4","num":1},{"pArea":"城阳区","school":"环城路小学","class":"3","num":1},{"pArea":"城阳区","school":"环城路小学","class":"3，4","num":1},{"pArea":"城阳区","school":"环城路小学","class":"4","num":2}];const arrToTree =(data=[]) =>{ let tree = [];
data.forEach(item=>{
let pArea = tree.find(node=>item.pArea == node.label);
if(!pArea) {
pArea = {"label": item.pArea,"children": []};
tree.push(pArea);
}
let school =pArea.children.find(node=>item.school == node.label);
if(!school) {
school = {"label": item.school,"children": []};
pArea.children.push(school);
}
if(!school.children.find(node=>item.class == node.label)) {
school.children.push({"label": item.class,"num": item.num});
}
});
return tree;
};
console.log(arrToTree(arr))
以上是 element Tree 如何把树形结构转换成数组。 的全部内容， 来源链接： utcz.com/p/936005.html
