一、方法封装导出
export const makeElementTree = (params) => {
// console.log(params);
// 解构取出参数
const {
pid,
list,
pidFiled,
labelFiled,
valueFiled
} = params
// 构建一个内部函数,用于实现递归
const makeTree = (pid, arr) => {
const res = []
arr.forEach(i => {
if (i[pidFiled] == pid) {
// 自己调用自己,递归查归属于自己的 children
const children = makeTree(i[valueFiled], list)
// 将原有的数据按照 element 的格式进行重构
const child = true
const obj = {
label: i[labelFiled],
value: i[valueFiled],
}
// 如果有 children 则插入 obj 中
if (children.length) {
obj.children = children
}
res.push(obj)
}
})
return res
}
return makeTree(pid, list)
}
二、引入使用
import { makeElementTree } from ‘@/utils/createTree’
const unitList = unit.unit
this.treeCats = makeElementTree({
pid: '0', // 跟后端约定的顶级分类的 pid 为 0
list: unitList, // 将原始数组参数穿进去
pidFiled: 'pId', // 在数组对象中,pid 字段名为 parentId
labelFiled: 'name',// 我们想要的 label 字段名为 catname
valueFiled: 'id' // 我们想要的 value 字段名为 catid
})