需求描述:将一维数组通过递归
生成el-tree
所需要的树形结构数组。
效果如下:
<template>
<div>
<el-tree
:data="treeData"
node-key="id"
@check="check"
:default-checked-keys="checkedKeys"
show-checkbox
/>
</div>
</template>
<script>
export default {
data() {
return {
treeData: [],
checkedKeys: [],
selectedTreeNodes: []
};
},
mounted(){
this.initTreeData()
},
methods: {
initTreeData() {
// 初始数据结构
let data = [ //level: 层级; sortNo: 所属层级的排序序号
{ parentId: "1", id: "1-2", label: "二级标题1-2", sortNo: 2, level:2 },
{ parentId: "root", id: "1", label: "一级标题1", sortNo: 1, level:1},
{ parentId: "root", id: "3", label: "一级标题3", sortNo: 3, level:1 },
{ parentId: "1", id: "1-1", label: "二级标题1-1", sortNo: 1, level:2 },
{ parentId: "2", id: "2-1", label: "二级标题2-1", sortNo: 1, level:2 },
{ parentId: "1-2", id: "1-2-1", label: "三级标题1-2-1", sortNo: 1, level:3 },
{ parentId: "root", id: "2", label: "一级标题2", sortNo: 2, level:1 },
{ parentId: "2", id: "2-2", label: "二级标题2-2", sortNo: 2, level:2 },
];
// 第一步:乱序-排序
data.sort((a,b)=>{return a.level == b.level ? a.sortNo-b.sortNo : a.level - b.level});
// 第二步:利用对象的性质存储父节点与子节点的映射关系
let obj = {}
data.forEach(ele=>{ (!obj[ele.parentId]) ? obj[ele.parentId] = new Array(ele) : obj[ele.parentId].push(ele)});
// 第三步:递归生成树状结构
this.treeData = this.toTree(obj, 'root'); //‘root' 根节点
console.log('treeData', this.treeData);
// 处理后数据结构
// let data = [ //level: 层级; sortNo: 所属层级的排序序号
// { parentId: "root", id: "1", label: "一级标题1", sortNo: 1, level:1, children: [
// { parentId: "1", id: "1-1", label: "二级标题1-1", sortNo: 1, level:2, children: [] },
// { parentId: "1", id: "1-2", label: "二级标题1-2", sortNo: 2, level:2, children: [
// { parentId: "1-2", id: "1-2-1", label: "三级标题1-2-1", sortNo: 1, level:3 },
// ]},
// ]},
// { parentId: "root", id: "2", label: "一级标题2", sortNo: 2, level:1, children:[
// { parentId: "2", id: "2-1", label: "二级标题2-1", sortNo: 1, level:2, children: [] },
// { parentId: "2", id: "2-2", label: "二级标题2-2", sortNo: 2, level:2, children: [] },
// ]},
// { parentId: "root", id: "3", name: "一级标题3", sortNo: 3, level:1, children: [] }
// ];
},
toTree(obj, treeNode){
let treeNodeList = obj[treeNode];
if(!treeNodeList) return [];
let res = [];
treeNodeList.forEach(ele => {
let children = JSON.parse(JSON.stringify(this.toTree(obj, ele.id)));
res.push({...ele, children});
})
return res;
},
/* 节点点击选择 */
check(row, rows){
let {checkedKeys, checkedNodes} = rows;
this.selectedTreeNodes = checkedNodes;
},
}
};
</script>