tree树形控件将返回来的数据和自己写的数据组在一起
可以通过遍历返回来的数据,将其与自己写的数据进行合并。具体步骤如下:
-
遍历返回来的数据,获取每个节点的id和父节点id,并将其存储到一个Map中。
-
遍历自己写的数据,将每个节点的id和父节点id与Map中存储的节点进行比对。如果存在父节点,则将自己写的节点添加到父节点的children属性中。
-
对于Map中存储的节点,如果没有父节点,则将其添加到根节点中。
-
最终得到的树形数据即为返回来的数据和自己写的数据合并后的结果。
示例代码如下:
// 返回来的数据
const data1 = [
{ id: 1, name: '节点1', parentId: 0 },
{ id: 2, name: '节点2', parentId: 1 },
{ id: 3, name: '节点3', parentId: 2 }
]
// 自己写的数据
const data2 = [
{ id: 4, name: '节点4', parentId: 2 },
{ id: 5, name: '节点5', parentId: 4 }
]
// 定义一个Map,用于存储返回来的数据
const map = new Map()
data1.forEach(item => {
map.set(item.id, item)
})
// 遍历自己写的数据,将其添加到返回来的数据中
data2.forEach(item => {
const parent = map.get(item.parentId)
if (parent) {
if (!parent.children) {
parent.children = []
}
parent.children.push(item)
}
})
// 遍历返回来的数据,将没有父节点的节点添加到根节点中
const root = []
map.forEach(item => {
if (!item.parentId) {
root.push(item)
}
})
console.log(root)
// 输出结果:
// [
// {
// "id": 1,
// "name": "节点1",
// "parentId": 0,
// "children": [
// {
// "id": 2,
// "name": "节点2",
// "parentId": 1,
// "children": [
// {
// "id": 3,
// "name": "节点3",
// "parentId": 2
// },
// {
// "id": 4,
// "name": "节点4",
// "parentId": 2,
// "children": [
// {
// "id": 5,
// "name": "节点5",
// "parentId": 4
// }
// ]
// }
// ]
// }
// ]
// }
// ]
原文地址: https://www.cveoy.top/t/topic/bsIF 著作权归作者所有。请勿转载和采集!