之前做树的展开和折叠都是使用default-expand-all加v-if来实现el-tree的全部展开和折叠,这样虽然可以实现功能但是会比较消耗性能,而且如果加上比较复杂的功能会出现一些不好修复的BUG。
下面教大家一个新的方法不仅可以避免以上问题还可以获得更好的用户体验
<el-switch
v-model="switchValue"
@change="switchCheange"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
<el-tree
ref="treeRef"
:props="props"
:data="treeData"
node-key="id"
show-checkbox
:default-checked-keys="defaultCheckedKeys"
:default-expand-all="isExpand"
@check-change="handleCheckChange">
// 这里default-expand-all不是响应式的,这行代码可以删掉,这里只做展示
</el-tree>
switchCheange(){
this.isExpand = !this.isExpand
let treeList = this.treeData;
//关键代码
for (let i = 0; i < treeList.length; i++) {
this.$refs.treeRef.store.nodesMap[treeList[i].id].expanded = this.isExpand;
}
}