使用el-table的展开行，如何实现只可以展开一行

在Vue.js中，如果你想要使用Element UI的`el-table`组件实现表格行的单层展开，可以使用`row-expander`属性配合`v-model`和自定义模板。下面是一个简单的示例：

首先，在你的`<template>`部分设置一个默认状态用于控制哪一行展开：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <!-- 添加展开行列 -->
    <el-table-column type="expand">
      <template slot-scope="{ row }">
        <!-- 只显示展开的第一行，这里通过row.index来判断是否展开当前行 -->
        <div v-if="expandedRows.includes(row.$index)">{{ row.expandedContent }}</div>
      </template>
    </el-table-column>
    <!-- 你可以添加其他列... -->
  </el-table>

  <!-- 展开行按钮 -->
  <el-button @click="toggleExpand(row)" v-for="(row, index) in tableData" :key="index" :disabled="expandedRows.includes(index)">
    展开{{ row.name }}
  </el-button>
</template>

然后，在你的`methods`里定义`toggleExpand`函数来切换展开状态：

export default {
  data() {
    return {
      expandedRows: [], // 存储已展开的行索引
      tableData: [
        { name: '张三', expandedContent: '详细信息...' },
        { name: '李四', expandedContent: '更多详情...' },
        // 更多数据...
      ]
    };
  },
  methods: {
    toggleExpand(row) {
      if (!this.expandedRows.includes(row.$index)) {
        this.expandedRows.push(row.$index);
      } else {
        const index = this.expandedRows.indexOf(row.$index);
        this.expandedRows.splice(index, 1); // 移除已展开的行
      }
    }
  }
};

在这个例子中，每次点击某个行按钮，就会检查该行是否已经在`expandedRows`数组中。如果不在，则添加；如果在，则从数组中移除，从而实现只展开一行的效果。