elementUI uses table multiple selection to realize single selection
This is elementui's form multiple selection
- First hide the multi-select checkbox
::v-deep .el-table__header {
.el-checkbox {
display: none;
}
}
2. Use the selection-change event of the table to achieve single selection
<template>
<el-table
ref="multipleTable"
:data="tableData"
style="width: 100%;"
class="exam_table"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column label="角色名称" min-width="120" prop="name">
</el-table-column>
<el-table-column prop="num" label="成员数量" min-width="120">
</el-table-column>
</el-table>
</template>
data(){
return {
tableSelect:[]
}
},
methods:{
handleSelectionChange(val) {
if (val.length > 1) {
this.$refs.multipleTable.clearSelection();
this.$refs.multipleTable.toggleRowSelection(val.pop());
} else {
this.tableSelect = val;
}
},
}
Effect
