el-tree 展开关闭全部_el-tree 关闭默认展开

最近使用 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>