解决default-expand-all属性无法动态渲染的问题

<template>
    <div class="wlGantt">
        <el-button @click="clickButton('expand1')">展开所有行</el-button>
        <el-button @click="clickButton('expand2')">收起所有行</el-button>
        <el-table :data="tableData" border style="width: 100%" :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        row-key="id" @expand-change="expandChange" :default-expand-all="flag">
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    data() {
      return {
        tableData: [{
          id: 1,
          date: '2016-05-02',
          name: '王小虎1',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: 2,
          date: '2016-05-04',
          name: '王小虎2',
          address: '上海市普陀区金沙江路 1517 弄',
          children: [{
              id: 35,
              date: '2016-05-01',
              name: '王小虎35',
              address: '上海市普陀区金沙江路 1519 弄',
              children: [{
              id: 36,
              date: '2016-05-01',
              name: '王小虎36',
              address: '上海市普陀区金沙江路 1519 弄',
              
            }, {
              id: 37,
              date: '2016-05-01',
              name: '王小虎37',
              address: '上海市普陀区金沙江路 1519 弄',
              children: [{
              id: 40,
              date: '2016-05-01',
              name: '王小虎340',
              address: '上海市普陀区金沙江路 1519 弄'
            }, {
              id: 41,
              date: '2016-05-01',
              name: '王小虎41',
              address: '上海市普陀区金沙江路 1519 弄'
          }]
          }]
            }, {
              id: 38,
              date: '2016-05-01',
              name: '王小虎39',
              address: '上海市普陀区金沙江路 1519 弄'
          }]
        }, {
          id: 3,
          date: '2016-05-01',
          name: '王小虎3',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          id: 4,
          date: '2016-05-03',
          name: '王小虎4',
          address: '上海市普陀区金沙江路 1516 弄',
          children: [{
              id: 31,
              date: '2016-05-01',
              name: '王小虎31',
              address: '上海市普陀区金沙江路 1519 弄',
              children: [{
              id: 33,
              date: '2016-05-01',
              name: '王小虎33',
              address: '上海市普陀区金沙江路 1519 弄'
            }, {
              id: 34,
              date: '2016-05-01',
              name: '王小虎34',
              address: '上海市普陀区金沙江路 1519 弄'
          }]
            }, {
              id: 32,
              date: '2016-05-01',
              name: '王小虎32',
              address: '上海市普陀区金沙江路 1519 弄'
          }]
        }],
        flag: false,
      }
    },
    methods: {
     clickButton(str) {
            if(str == 'expand1') {
                console.log(1111)
                this.flag = false;
            } else if(str == 'expand2') {
                console.log(2222)
                this.flag = true;
            }
        }
    }
  }
</script>

点展开所有行和收起所有行按钮的时候打印了111，222但是展开和收起却没有生效。
解决办法：
给表格添加v-if="showTable"(一定要添加)

// 方法改成这样
 clickButton(str) {
            if(str == 'expand1') {
                console.log(1111)
                this.showTable= false;
                this.flag = false;
                this.$nextTick(() => {
                    this.showTable= true;
                });
            } else if(str == 'expand2') {
                console.log(2222)
                this.showTable= false;
                this.flag = true;
                this.$nextTick(() => {
                    this.showTable= true;
                });
            }
        }

this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。