【前端】完美解决element UI tree组件获取叶子节点及其父节点的问题

小博开发过程中遇到了获取el-tree选中node的子node及其父node的问题
假设树形结构如下

[{
   label: '一级 1',
   children: [{
     label: '二级 1-1'
   }]
 }, {
   label: '一级 2',
   children: [{
     label: '二级 2-1'
   }, {
     label: '二级 2-2',
   }]
 }, {
   label: '一级 3',
   children: [{
     label: '二级 3-1'
   }, {
     label: '二级 3-2',
   }]
 }]

小博在选中叶子节点后

希望获得的数据结构如下

checkedNodes = [{
label:'一级 2',
children:['二级 2-1', '二级 2-2'],
},{
label:'一级 3',
children:['二级 3-1'],
}]

而现有API如下：

checkedNodes = (this.$refs.Tree as any).getCheckedNodes
// 获得结果
checkedNodes = [{
label:'二级 2-1',
},{
label:'二级 2-2',
},{
label:'二级 3-1',
}]

无法得知父节点，根据官方文档，在getCheckedNodes第二个参数设为true，可以获得父节点，然而……

checkedNodes = (this.$refs.Tree as any).getCheckedNodes(false, true);
// 获得结果
checkedNodes = [{
   label: '一级 2',
   children: [{
     label: '二级 2-1'
   }, {
     label: '二级 2-2',
   }]
 }, 
{
label:['二级 2-1'],
}, 
{
label:['二级 2-2'],
},
{
   label: '一级 3',
   children: [{
     label: '二级 3-1'
   }, {
     label: '二级 3-2',
   }]
 },
{
label:['二级 3-1'],
}]

这结构真的是逆天了，父子节点轮流上，幸好它还是有顺序的，父节点对象下面，紧跟该父节点下选中的叶子节点。So,对小博对以上结构做了转换，完美得到了自己理想的结构。代码如下：

private dealArray() {
	const checkedNodes = (this.$refs.Tree as any).getCheckedNodes(false, true);
    const checkedParam: any = [];
     let index = -1;
     if(checkedNodes.length !== 0) {
         checkedNodes.forEach((item: any) => {
             // 父节点结构的情况
             if (item.children !== undefined) {
                 index ++;
                 checkedParam[index] = {
                     label: item.dim,
                     children: [],
                 };
             } else {
                 checkedParam[index].children.push(item.label);
             }
         });
     }
     return checkedParam;
}

小博以上场景只针对两层父子节点的树，需要多级父节点的，还是自己想想方法吧~

对你有帮助的话，点个赞吧~小博比心?