背景:产品需要把表格复选框多选功能变成单选,让用户只能选择一条
一、表格代码
<el-table
:data="tableData"
style="width: 100%"
:header-cell-style="{ background: '#ededed' }"
ref="refTable"
:row-key="getRowKeys"
:expand-row-keys="expands"
@expand-change="expandChange"
@selection-change="selectionChange"
>
二、核心代码
selectionChange(row) {
if (row.length > 1) {
// 复选框变单选
this.$refs.refTable.clearSelection();
this.$refs.refTable.toggleRowSelection(row.pop());
}
},
三、最后一步细节完善,隐藏全选框CSS代码
.selectDialogTable ::v-deep .el-table__header {
.el-checkbox {
display: none;
}
}