日常开发中我们会接触到需要数据渲染的树形结构,当我们发起请求拿到的数据并不是完整的树形数据,那么就需要我们进行加工处理再使用。在我们拿到数据之后,需要把数组转化成树形结构,那么我就就可以使用以下的三种方法
一、递归
export function transArray(arr) {
// 循环遍历
var newArr = [] // 专门收集转化后的数组
arr.forEach((item) => {
// 1-先要找第一层
if (item.parentId === parentId) {
// 3-收集非一级
var child = transArray2(arr, item.Id)
if (child.length) {
// 有长度表示可以收集到二级
item.children = child
}
// 2-收集筛选出来的一级
newArr.push(item)
}
})
return newArr
}
二、下包 array-to-tree
import arrayToTree from 'array-to-tree'
export function transArray(arr) {
return arrayToTree(arr, {
parentProperty: 'parentId',
customID: 'Id'
})
}
三、循环
// 把平铺的数组数据转成树形结构
export function tranListToTreeData(list) {
// 定义两个变量来
const treeList = [] // 存储新数组
const map = {} // 存储子数据
list.forEach(item => {
// 如果没有children这个属性,就添加这个属性
if (!item.children) {
item.children = []
}
// 把数据用对应的id存储起来
// console.log(item)
map[item.id] = item
})
// console.log(map)
list.forEach(item => {
// 如果有parentId就证明有父级,parentId就是父级的id,可以在map中通过id找到父级,并在父级中的children中添加子级
if (item.parentId) {
if (item.parentId === '-1') return
// console.log(item.parentId)
map[item.parentId].children.push(item)
} else {
// 如果没有parentId就证明是父级,就直接添加到treeList中
treeList.push(item)
}
})
return treeList
}