el-table设置expand，只允许一行

在Vue.js中，如果你想要使用Element UI的el-table组件，并限制展开行仅限于单行，你可以通过`show-header`属性和自定义模板来实现。首先，确保你在表格列上设置了`expand`属性，它会指示那一列可以展开。

<template>
  <el-table :data="tableData" highlight-current-row>
    <el-table-column prop="name" label="Name" width="180"></el-table-column>
    <!-- 添加 expand 属性 -->
    <el-table-column type="expand">
      <template slot-scope="{row}">
        <!-- 这里是你展示展开内容的自定义部分 -->
        <div v-if="row.expandable">这是展开的内容</div>
        <button @click.prevent="toggleExpand(row.$index)">点击显示/隐藏</button>
      </template>
    </el-table-column>

    <!-- 如果你想限制只有一行可以展开 -->
    <el-table-column label="Actions">
      <template slot-scope="scope">
        <el-button v-if="scope.row.$index === selectedRowIndex && !scope.row.expanded"
          type="primary"
          icon="el-icon-plus-round"
          @click="toggleExpand(scope.row.$index)">
          展开
        </el-button>
        <el-button v-if="scope.row.$index !== selectedRowIndex || scope.row.expanded"
          type="primary"
          icon="el-icon-minus-round"
          @click="toggleCollapse(scope.row.$index)">
          收起
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'Item 1', expanded: false },
        // 更多数据...
      ],
      selectedRowIndex: -1,
    };
  },
  methods: {
    toggleExpand(index) {
      this.selectedRowIndex = index;
      this.tableData.forEach((item, i) => {
        item.expanded = i === index ? true : false;
      });
    },
    toggleCollapse(index) {
      this.tableData[index].expanded = false;
      this.selectedRowIndex = -1;
    },
  },
};
</script>

在这个例子中，我们创建了一个自定义的按钮来控制每一行的展开状态，并保持了`selectedRowIndex`变量来跟踪当前展开的那一行。当用户点击非展开行的“收起”按钮时，我们会清除`expanded`标志并更新`selectedRowIndex`。注意这只是一个基本的实现，你可能需要根据实际需求调整逻辑。