1.首先给table绑定ref和row-click事件
<el-table
border
style="width: 100%"
:data="tableData"
v-loading="loading"
element-loading-text="拼命加载中"
@row-click="handleRowClick"
ref="tableRef"
>
</el-table>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
2.拿到复选框选中状态的长度 并且 上一个选中的id和当前选中的id不相等来判断 (两个id不相等代表第二次点击选中不同的复选框)
满足条件则清除上一个复选框 在重新给当前点击的行一个选中状态
toggleRowSelection 多选表格 参数1是选中的值 参数2为true则不可以取消选中
clearSelection 清空用户的选择
//点击行 选中复选框 上一个被点击得复选框取消选中
handleRowClick(row){
let table = this.$refs.tableRef;
if (table.selection.length >= 1 && table.selection[0].id !== row.id) {
table.clearSelection(row);
table.toggleRowSelection(row);
} else {
table.toggleRowSelection(row);
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10