1、后端一次性返回所有树节点的数据，如何进行优雅的渲染呢？
例如后端返回的是这样的数据：
image.png
这个时候我们就要根据pid === id来进行树结构的分类
resetTree (val) {
let list = val || []
let result = []
let hashTable = {}
for (let i = 0; i < list.length; i++) {
let label = list[i]
let id = parseInt(label.id)
let parentId = parseInt(label.pId)
hashTable[id] = label
label.children = []
if (parentId === 0) {
result.push(label)
} else {
let parent = hashTable[parentId]
if (!parent) {
console.log('这个label找不到父级', label.id)
}
parent && parent.children.push(label)
}
this.setTree(result)
}
}
/*
通过这个方法就可以把数据转变成正常的树形的结构数据
这个时候还需对字段进行替换就需用到递归替换
*/
setTree (val) {
let item = []
val.map((list, i) => {
let newData = {}
newData.label = list.resName
newData.id = list.resId
newData.pId = list.parentResId
newData.is_show_add = false
newData.is_show_del = false
newData.children = list.subResList ? this.setTree(list.subResList) : []
item.push(newData)
})
this.treeList = item
return item
}
通过这个方法就可以把字段替换成 ui框架对应的渲染字段
这个也是一个常见的递归方法
