如何将elementui的el-table的展开行事件用自定义的按钮控制，并且可以实现“展开”“收起”的切换

在Element UI的el-table组件中，可以通过row-key属性来设置行的唯一标识，并使用expand-change事件来监听行的展开状态的改变。你可以通过控制数据来实现使用自定义按钮控制展开行的效果。

以下是一个简单的示例，展示如何使用自定义按钮控制el-table的展开行：

<template>
  <div>
    <el-button v-for="(item, index) in tableData" :key="index" @click="toggleExpand(item)">
      {{ item.expanded ? '收起' : '展开' }}
    </el-button>
    <el-table
      :data="tableData"
      :row-key="getRowKey"
      :expand-row-keys="expandedRows"
      @expand-change="handleExpandChange"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <!-- 这里放置扩展内容 -->
          <p>{{ props.row.description }}</p>
        </template>
      </el-table-column>
      <!-- 其他列 -->
    </el-table>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          name: 'John',
          description: 'John is a student.',
          expanded: false,
        },
        // ... 更多数据
      ],
      expandedRows: [],
    };
  },
  methods: {
    getRowKey(row) {
      return row.id;
    },
    toggleExpand(row) {
      const expandedRows = [...this.expandedRows];
      const index = expandedRows.indexOf(row.id);
      if (index > -1) {
        expandedRows.splice(index, 1);
        row.expanded = false;
      } else {
        expandedRows.push(row.id);
        row.expanded = true;
      }
      this.expandedRows = expandedRows;
    },
    handleExpandChange(row, expandedRows) {
      if (expandedRows.length > 0) {
        this.tableData.forEach(item => {
          if (item.id === row.id) {
            item.expanded = true;
          } else {
            item.expanded = false;
          }
        });
      }
    },
  },
};
</script>

在这个示例中，我们使用了一个名为expandedRows的数组来跟踪哪些行是展开的。每当用户点击按钮时，toggleExpand方法会被调用，它会更新expandedRows数组，从而控制哪些行是展开的。handleExpandChange事件处理函数会在展开行发生变化时被调用，它会更新数据源中每行的expanded属性，以便正确地显示展开/收起状态。