Element table组件动态设置expand展开项以及同时只展开一项

在Vue.js中，使用Element UI的<el-table>组件时，可以通过row-key属性设置每行数据的唯一标识，并使用:expand-row-keys属性动态控制哪些行处于展开状态。以下是一个简单的示例，展示如何实现动态设置展开项并同时只允许一项展开：

<template>
  <el-table
    :data="tableData"
    :row-key="getRowKey"
    :expand-row-keys="expandRowKeys"
    @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
        // ...
      ],
      expandRowKeys: []
    };
  },
  methods: {
    getRowKey(row) {
      return row.id; // 假设每行数据的唯一标识是id
    },
    handleExpandChange(row, expandedRows) {
      if (expandedRows.length) {
        // 如果有展开的行，则保证只有一个展开项
        this.expandRowKeys = [row.id];
      } else {
        // 如果没有展开的行，清空expandRowKeys
        this.expandRowKeys = [];
      }
    }
  }
};
</script>

在这个示例中，:row-key属性绑定了一个方法getRowKey，它返回数据项的唯一标识id。:expand-row-keys属性绑定了一个数组expandRowKeys，它包含了当前处于展开状态的行的id。handleExpandChange方法监听展开项的变化，如果有行被展开，则保证只有当前行处于展开状态，其他行则被收起。