一、使用map遍历实现数组转树
export function tranListToTreeData(arr) {
const treeArr = []
// 帮助快速确定上级
const map = {}
arr.forEach(item => {
item.children = []
map[item.id] = item
})
console.log(map)
// 写代码
arr.forEach(item => {
// 对arr进行循环,对每一个元素item,如果
// 1. item有上级元素pItem, 把item添加到pItem.children
// 2. item没有上级元素(根据item.pid去找,找不到元素), 添加到treeArr
const pItem = map[item.pid]
if (pItem) {
pItem.children.push(item)
} else {
treeArr.push(item)
}
})
return treeArr
}
二、使用递归函数实现树形数据处理
export function tranListToTreeData2(data, pid = '') {
const arr = []
data.forEach(item => {
// 找出一级
if (item.pid === pid) {
// 找出二级
const children = tranListToTreeData(data, item.id)
if (children.length) {
// 收集二级
item.children = children
}
// 收集一级
arr.push(item)
}
})
return arr
}
console.log(tranListToTreeData2(data))
三、导包实现数组转树
(1)导入npm install array-to-tree -S
(2)在utils工具函数中定义函数
export function tranListToTreeData3(arr) {
return arrayToTree(arr, {
parentProperty: 'pid',
customID: 'id'
})