el-table自定义按钮控制扩展expand

需求：自定义按钮实现表格扩展内容的展开和收起，实现如下：

将type=“expand”的表格列的宽度设置为width="1"，让该操作列不展示出来，然后通过ref动态调用组件的内部方法toggleRowExpansion(row, row.expanded)控制扩展内容的显隐问题。

关于动态收起所有展开项 可以通过遍历tableData，调用toggleRowExpansion(row, false)关闭

<template>
  <el-table
    :data="tableData"
    ref="table"
   <el-table-column
      label="商品 ID"
      prop="id">
   </el-table-column>
   <el-table-column label="操作">
      <template slot-scope="{ row }">
         <el-button type="text" @click="toggleExpand(row)" size="mini">
          详情<i :class="row.expanded ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
         </el-button>
      </template>
   </el-table-column>
   <el-table-column type="expand">
      <template slot-scope="props">
          <span>{{ props.row.detail}}</span>         
      </template>
   </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          detail: '好滋好味鸡蛋仔',
          id: '12987122',
        },
        {
          detail: '好滋好味鸡蛋仔22',
          id: '12987123',
        }]
      }
    },
    methods:{
    // 展开单项
     async toggleExpand(row) {
      //   如果需要远程获取详情数据
      // if (!row.detail) {
      //   const { data, code } = await xxx({});
      //   if (code === 0) {
      //     row.detail= data;
      //   }
      // }
      row.expanded = !row.expanded;
      this.$refs.table.toggleRowExpansion(row, row.expanded);
    },
    // 遍历tableData，收起所有展开项
    clearAllExpand() {     
      const tableInstance = this.$refs.mulSelectTable;
      this.tableData.forEach(row => {
        tableInstance.toggleRowExpansion(row, false); // 遍历每一行，调用方法并传入false来关闭展开状态
      });
    },
  }
  }
</script>