element ui table 展开行，增加按钮控制一键展开或收起

element ui table 展开行，增加按钮控制一键展开或收起

今天在做一个嵌套表格展开行的功能，需要实现通过按钮来控制全部展开/全部收起，网上看了很多帖子，都没有实际解决问题，下面记录一下解决办法。

先看效果

下面说一下思路

1. 先通过elementui的自定义表头，给列头上增加一个按钮。

        <el-table-column type="expand" width="50">
            <template slot="header" slot-scope="scope">
              <el-button type="text" @click="change">{{ isExpand ? '收起' : '展开' }}</el-button>
            </template>
            <template slot-scope="props">
             <!-- 嵌套表格内容-->
            </template>
       </el-table-column>

2. 定义一个变量用于控制展开或是收起

isExpand: false,//默认收起

3. 设置展开或是收起的方法

     //收起或展开
    change() {

      //如果表格没有数据，操作不起作用
      if (this.mallList.length == 0)
        return

      //取反
      this.isExpand = !this.isExpand

      //遍历设置
      this.mallList.forEach(e => {
        this.$refs.mallAuthorization.toggleRowExpansion(e, this.isExpand)
      });
    }

大功告成！