element-ui中table表格的折叠和隐藏

el-table 的折叠展开

今天使用elment-ui的el-table组件做表格的折叠和展开 使用 default-expand-all属性 通过click控制它为true或false来完成折叠展开 但是却没有效果！！！

通过查资料发现需要这样来写

<el-table
        v-if="refreshTable"
        :header-cell-style="{background:'#f4f3f9',color:'#606266'}"
        :data="deptList"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        :default-expand-all="Expand"
        :tree-props="{children: 'children', hasChildren: 'hasChildren' 
     >

 -------------数据设置
  data() {
   return {
   	Expand: true,
      refreshTable: true,   
   }
  }

-------------鼠标点击事件
 /** 展开/折叠操作 */
    toggleExpandAll() {
      this.refreshTable = false

      this.Expand = !this.Expand

      this.$nextTick(() => {
        this.refreshTable = true
      })
    },
  	 

设置v-if table的显示和隐藏 设置default-expand-all 两个都要设置 向上面那样 最后成功了 也不知道具体 原理 先这样记住！
一起加油啊 ~~~

最近发现之前那个方法有bug 很不好用 又找到一个简单好用得

  this.$refs.table..toggleRowExpansion(this.tableData[0]) // 全部折叠

直接拿到table得dom元素， 然后调用element-ui的table表格得一个方法toggleRowExpansion就可以实现展开和折叠了