最近使用 element-ui 中的 tree ,发现设置一个按钮展开关闭全部很难,想出下面的解决办法,解决了,但是感觉不是很好
思路主要就是 使用 v-if 控制 整个tree的显示隐藏,使它重新渲染
<template>
<div class='home-activity'>
<div class="c-a-right">
<el-button @click="open()">展开/关闭</el-button>
<el-tree
v-if="openOrNot"
class="filter-tree"
:data="data2"
:props="defaultProps"
:default-expand-all="defaultExpand"
:filter-node-method="filterNode"
node-key="navId"
ref="tree">
</el-tree>
</div>
</div>
</template>
<script>
export default {
name: 'home-activity',
components: {},
data() {
return {
defaultExpand: true,
openOrNot: true,
data2: [{
id: 1,
label: '一级 1',
children: [{
id: 4,
label: '二级 1-1',
children: [{
id: 9,
label: '三级 1-1-1'
}, {
id: 10,
label: '三级 1-1-2'
}]
}]
}, {
id: 2,
label: '一级 2',
children: [{
id: 5,
label: '二级 2-1'
}, {
id: 6,
label: '二级 2-2'
}]
}, {
id: 3,
label: '一级 3',
children: [{
id: 7,
label: '二级 3-1'
}, {
id: 8,
label: '二级 3-2'
}]
}],
defaultProps: {
id:'navId',
children: 'children',
label: 'label',
disabled:'navOffOn'
},
}
},
computed: {},
watch: {},
methods: {
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
open() {
this.defaultExpand = !this.defaultExpand
this.openOrNot = false;
setTimeout(() => {
this.openOrNot = true;
}, 10);
}
},
created() {},
mounted() {},
beforeDestroy() {}
}
</script>
<style lang='scss' scoped>
.home-activity {
width: 100%;
height: 100%;
}
.d-header {
color: white;
.h-title {
padding-top: 15px;
}
}
.d-content {
display: flex;
.c-a-left {
width: 30%;
height: 100%;
text-align: left;
border-right: 2px solid $c-light-gray;
}
.c-a-right {
width: 70%;
height: 100%;
}
}
</style>