在项目开发中,使用了element-UI,一个需求是这样的:快速展开树形结构。在树形结构上,采用的element-UI的tree树形结构,但是在完成这个需求中,发现了一个很严重的缺陷,导致需求无法实现:
问题描述:
快速展开时,只需要往default-expanded-keys中添加值即可实现快速展开,但是,在切换展开层级时,想要除选择的层级展开外,其余层级全部回折,于是清除default-expanded-keys中的元素,可是这种方法无法实现回折,需求无法实现......
在经过一系列的尝试之后,终于找到解决方案,但是方法比较粗糙(暂未找到其他好的解决方案):
解决方法如下:
首先新创建一个变量进行树形结构的存储(以下写法为了解决浅拷贝问题):
this.dataRemeber = JSON.parse(JSON.stringify(this.treeData));
然后再发现选择更改时,将记录的数值清空掉,然后根据选择的不同,重新给default-expanded-keys赋值,之后再给树形结构赋值,进行重新的渲染,即:
this.dataRemeber = [];
if(val == 1){ //选项为展开一级结构
this.dataRemeber = JSON.parse(JSON.stringify(this.treeData));
this.$store.commit('addOpenTreeData', this.treeData[0].id); //Vuex 记录全局数据,将需要展开的数据push到default-expanded-keys数组中
return ;
}
if(val == 2){ //选项为展开二级结构
this.dataRemeber = JSON.parse(JSON.stringify(this.treeData));
for (let i=0; i<this.treeData[0].children.length; i++){
this.$store.commit('addOpenTreeData', this.treeData[0].children[i].id); //Vuex 记录全局数据,将需要展开的数据push到default-expanded-keys数组中
}
return ;
}
采用这种方式,即可实现,展开二级结构之后,再次选择展开以及结构,则二级结构则会自动回折。