Vue Element UI el-table 展开行控制 - 一次只展开一行

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-button @click="expandRow(props.row)">展开</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
    </el-table>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        tableData: [
          { name: '张三', age: 20 },
          { name: '李四', age: 25 },
          { name: '王五', age: 30 }
        ],
        expandedRow: -1 // 默认没有展开的行
      };
    },
    methods: {
      expandRow(row) {
        // 取消其他已展开的行
        this.expandedRow = row === this.expandedRow ? -1 : row;
      }
    }
  };
</script>
<p>在上面的示例中，点击展开按钮时，会调用 <code>expandRow</code> 方法，该方法会根据当前点击的行是否已经展开来判断是展开还是关闭该行。如果已经展开，则将 <code>expandedRow</code> 设置为 -1，否则将 <code>expandedRow</code> 设置为当前行的索引。然后在 <code>el-table-column</code> 的 <code>type</code> 为 <code>expand</code> 的列中，根据 <code>expandedRow</code> 属性来决定是否展开该行。</p>
<p>这样，当展开一行时，其他已展开的行会被关闭。</p>