1、后端一次性返回所有樹(shù)節(jié)點(diǎn)的數(shù)據(jù)，如何進(jìn)行優(yōu)雅的渲染呢？
例如后端返回的是這樣的數(shù)據(jù)：
image.png
這個(gè)時(shí)候我們就要根據(jù)pid === id來(lái)進(jìn)行樹(shù)結(jié)構(gòu)的分類
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('這個(gè)label找不到父級(jí)', label.id)
}
parent && parent.children.push(label)
}
this.setTree(result)
}
}
/*
通過(guò)這個(gè)方法就可以把數(shù)據(jù)轉(zhuǎn)變成正常的樹(shù)形的結(jié)構(gòu)數(shù)據(jù)
這個(gè)時(shí)候還需對(duì)字段進(jìn)行替換就需用到遞歸替換
*/
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
}
通過(guò)這個(gè)方法就可以把字段替換成 ui框架對(duì)應(yīng)的渲染字段
這個(gè)也是一個(gè)常見(jiàn)的遞歸方法
