Vue +el-checkbox multi-selection box realizes single selection
1. Add a column to the table
<el-table-column type="selection" align="center" width="100" />
2. Hide the select all button
/deep/ thead .el-table-column--selection .cell{
display: none;
}
3. Add one to the table ref
, for example: ref="Table"
(add to the attribute of el-table)
add an event to the table@selection="getCurrentRow"
// 获取当前行数据
getCurrentRow(val,row){
if (val.length > 1) {
this.$refs.SenderTable.clearSelection()
this.$refs.SenderTable.toggleRowSelection(val.pop())
}
this.checkedUserId = row.userId // row里包含了选中当前行的数据
},
4. If you want to click on the row, select it, and add an event to el-tablerow-click
The corresponding method is
// 点击表行也可实现选中当前行
showRowClick(row) {
this.$refs.SenderTable.clearSelection()
this.$refs.SenderTable.toggleRowSelection(row)
this.checkedUserId = row.userId
},