elementUI的table使用展开功能( type=“expand“ ),展开时合起上一次展开的内容,始终保持展开内容为一个,并且再次点击合起自身

在Element UI的Table组件中，如果你想要在用户展开一个行时自动合起上一个展开的行，你可以通过以下方法实现：

1. 使用row-key属性来为每一行设置唯一标识。
2. 在数据对象中添加一个标志位来跟踪当前展开的行。
3. 在expand-change事件中更新这个标志位，并关闭之前展开的行。

以下是实现这个功能的示例代码：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    :row-key="getRowKey"
    :expand-row-keys="expandedRowKeys"
    @expand-change="handleExpandChange"
  >
    <!-- 其他列定义 -->
    <el-table-column type="expand">
      <template slot-scope="props">
        <!-- 这里放置扩展内容 -->
        <p>{{ props.row.description }}</p>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // 数据对象，每个对象包含一个唯一的id和其他属性
      ],
      expandedRowKeys: [] // 当前展开行的id数组
    };
  },
  methods: {
    getRowKey(row) {
      return row.id; // 假设每行数据对象中都有一个唯一的id字段
    },
    handleExpandChange(row, expandedRows) {
      if (expandedRows.length) {
        this.expandedRowKeys = [row.id]; // 更新展开行的数组
      } else {
        this.expandedRowKeys = []; // 清空展开行的数组
      }
    }
  }
};
</script>

在这个例子中，getRowKey方法用来为每行设置唯一的key，expandedRowKeys数组用来存储当前展开行的id。在handleExpandChange事件处理函数中，当有行展开时，更新expandedRowKeys数组以保持只有一个行处于展开状态。如果用户关闭了之前展开的行，expandedRows数组将为空，此时清空expandedRowKeys数组。