在Element UI的Table组件中，如果你想要在用户展开一个行时自动合起上一个展开的行，你可以通过以下方法实现：
- 使用
row-key属性来为每一行设置唯一标识。 - 在数据对象中添加一个标志位来跟踪当前展开的行。
- 在
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数组。