文章目录
前言
树形控件在OA系统内是很常见的,如依赖jquery的ztree,elementui的el-tree,其中ztree是支持扁平结构和层级结构的,el-tree是只支持层级结构,后台一般查完数据库不处理数据的话,都是返回扁平数据,即通过id、pid判断父子关系,但在el-tree中使用就需要前台处理了,如果不想处理,也可以要求后台返回要求的格式,重在沟通。
一、转换方法
1.递归
function treeData(data, pid="0") {
let arr = []
arr.forEach(item => {
if (item.pid === pid) {
item.children = treeData(data, item.id)
arr.push(item)
};
})
return arr
}
2.双层filter
function handleTree(data, id, parentId, children, rootId) {
id = id || 'id'
parentId = parentId || 'parentId'
children = children || 'children'
rootId = rootId || 0
// 对源数据深度克隆
const cloneData = JSON.parse(JSON.stringify(data))
// 循环所有项
const treeData = cloneData.filter(father => {
const branchArr = cloneData.filter(child => {
// 返回每一项的子级数组
return father[id] === child[parentId]
})
branchArr.length > 0 ? father.children = branchArr : ''
// 返回第一层
return father[parentId] === rootId
})
return treeData !== '' ? treeData : data
}
总结
- 递归方法虽然代码量少,但是对扁平数据也是有要求的,父级要在子集前,数据必须按父子顺序返回,如果按子父顺序返回则会产生bug
- 双层filter方法虽然代码行数较多,但因为其对数据顺序无要求,所以推荐使用此方法