vue element-ui el-table点击行 选中复选框 上一个被点击得复选框取消选中

时间:2025-01-19 17:05:13

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