急!!关于element-ui table 如何用按钮控制 使table的展开行 全部打开和隐藏?

html:

控制按钮:

<el-button
    type="success"
    size="small"
    :icon="active?'el-icon-arrow-up':'el-icon-arrow-down'"
    @click="displaysubBond"
>展开</el-button>

主表+子表

 <el-table :data="bondList" height="550" style="width:90%" :default-expand-all="isExpand" border>
    <el-table-column type="expand">
        //可展开的子表
        <template slot-scope="props">
            <el-table :data="subBondList" border >
                <el-table-column></el-table-column>
                ……
            </el-table>
        </template>
    </el-table-column>
    <el-table-column></el-table-column>
</el-table>

script:

data(){
    return {
        isExpand:false
    }
}
displaySubBond() {
      this.active = !this.active;
      if (this.active) {
        console.log("展开");

        this.isExpand = true;
      } else {
        console.log("关闭");
        this.isExpand = false;
      }
    }

展开跟关闭都能显示到控制台上,但是子表就是不能展开,没有反应!
QAQ求解

你的意思是用按钮来控制表格的显隐吗?

如果要动态控制,需要用expand-row方法


<el-table :data="tableData5" :row-key="getRowKeys" :expand-row-keys="expands">


// 获取row的key值
      getRowKeys (row) {
          return row.id
      },
      // 要展开的行,数值的元素是row的key值
      expands: []

当你需要展开的时候,往expands里面push对应的行的id

this.expands.push(this.tableData[1].id)