在 Element UI 的 <el-table>
组件中,@selection-change
事件通常用于处理表格中选择框的状态变化。如果希望在表格中只能选择一个选项,可以通过以下方法实现:
-
使用
@selection-change
事件:在事件处理函数中确保用户只能选择一个选项。 -
设置选择模式:Element UI 表格的选择模式有两种:单选和多选。为了实现单选,你可以使用
type="selection"
属性配合@selection-change
。
以下是一个示例,展示了如何确保用户只能选择一个选项:
示例代码
<template>
<el-table
ref="renewalTable"
:data="renewalData"
border
style="width: 100%; margin-top: 15px;"
@selection-change="handleSelectionChange"
:header-cell-style="{ background: '#F9FAFC', color: 'black' }"
class="xw-publabel renewalTable"
:row-key="rowKey"
>
<el-table-column
type="selection"
width="55"
:selectable="selectable"
></el-table-column>
<!-- 其他列 -->
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
renewalData: [
// 示例数据
{ name: 'John', age: 30 },
{ name: 'Jane', age: 25 },
{ name: 'Tom', age: 40 }
],
selectedRows: [],
};
},
methods: {
handleSelectionChange(selectedRows) {
if (selectedRows.length > 1) {
// 只保留最新选择的项
this.$refs.renewalTable.clearSelection();
this.$refs.renewalTable.toggleRowSelection(selectedRows[selectedRows.length - 1]);
}
// 记录选择的行
this.selectedRows = selectedRows;
console.log('Selected rows:', this.selectedRows);
},
selectable(row, index) {
// 可根据需求调整选中状态
return true;
},
rowKey(row){
return row.id
}
}
};
</script>
解释
-
@selection-change
事件处理函数:- 在
handleSelectionChange
方法中,我们检查selectedRows
数组的长度。如果长度大于 1,清除当前选择并只保留最后一个选中的项。
- 在
-
清除选择:
this.$refs.renewalTable.clearSelection()
用于清除所有选择。this.$refs.renewalTable.toggleRowSelection()
用于重新选择最后一个选中的行。
-
row-key
属性:row-key
确保每一行有唯一标识符,有助于维护正确的选择状态。
-
selectable
属性:- 可选属性用于控制是否可以选择行。此处返回
true
允许所有行被选择。
- 可选属性用于控制是否可以选择行。此处返回
使用这种方式,可以确保用户在表格中只能选择一个选项。如果你需要进一步调整或优化,根据你的具体需求修改 handleSelectionChange
方法即可。