el-table设置expand，只允许同时只有一行能展开

在Vue的Element UI库中的el-table组件中，如果你想要实现一个表格，在单击某一行时仅允许一列可以展开，你可以通过设置`expand-row-keys`属性和`expand-state`来控制。这个属性通常用于定义哪些行可以展开，而`expand-state`则表示当前每一行是否已经展开。

首先，你需要在数据中为每一行指定一个唯一的关键字或者标识符，例如：

data() {
  return {
    tableData: [
      { id: '1', name: 'Row 1', expandKey: 'row1' },
      { id: '2', name: 'Row 2', expandKey: 'row2' },
      // 更多行...
    ],
    expandKeys: [] // 初始时设置为空数组
  }
}

然后在`<el-table>`组件中配置：

<template>
  <el-table :data="tableData" style="width: 100%">
    <!-- 其他表头、列定义... -->
    <el-table-column type="expand">
      <template slot-scope="{ row }">
        <!-- 展开内容 -->
        <p>这是行 {{ row.id }} 的详细信息</p>
      </template>
    </el-table-column>

    <!-- 行点击事件监听并处理扩展状态 -->
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button v-if="!expandKeys.includes(row.expandKey)" @click="toggleExpand(row)">展开</el-button>
        <el-button v-else disabled>已展开</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  methods: {
    toggleExpand(row) {
      if (!this.expandKeys.includes(row.expandKey)) {
        this.expandKeys.push(row.expandKey);
        row.expanded = true; // 使用假设的expanded属性来控制展开状态
      } else {
        const index = this.expandKeys.indexOf(row.expandKey);
        this.expandKeys.splice(index, 1);
        row.expanded = false;
      }
    }
  },
  computed: {
    expandState(row) {
      return this.expandKeys.includes(row.expandKey);
    }
  }
}
</script>

在这个例子中，当用户点击非展开行的“展开”按钮时，会将对应的键添加到`expandKeys`数组中，使得该行可以展开；如果已经展开，则会从数组中移除该键，关闭展开内容。`expand-state`计算属性可以根据`expandKeys`来判断当前行是否处于展开状态。