vue3中使用el-table的展开行，如何展开第一个之后，在展开第二个，上一个默认关闭

在Vue3中使用Element UI的`el-table`组件实现展开行并且控制展开状态，你可以利用`v-model`绑定数组状态来管理每个行的状态。假设你有一个数组`expandedRows`来存储每行是否展开，初始只设置第一项为true：

<template>
  <el-table
    :data="tableData"
    ref="tableRef"
    v-model="expandedRows"
    @expand-change="handleExpandChange"
  >
    <!-- 表头部分 -->
    <el-table-column type="expand" />
    <!-- 其他列... -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        //...
      ],
      expandedRows: [true, false]  // 默认第一项展开，第二项折叠
    };
  },
  methods: {
    handleExpandChange(row) {
      this.expandedRows[row.$index] = !this.expandedRows[row.$index];  // 切换当前行展开状态
      if (row.$index === 0 && this.expandedRows[row.$index + 1]) {  // 如果展开的是第一个，且下一行已展开，关闭第一个
        this.expandedRows[0] = false;
      }
    }
  }
};
</script>

在这个例子中，当用户点击行的展开按钮时，会触发`handleExpandChange`方法，它会切换当前行的展开状态，并检查是否需要关闭上一个已经展开的行。如果上一个是第一个元素，且下一个元素已经被展开，则将第一个元素的状态改为关闭。