【若依前后端分离】点击行的任意位置可以取消或选中勾选状态

【若依前后端分离】表格勾选状态换页不消失_若依table翻页保留选中行-CSDN博客

1、页面

在el-table中添加@row-click="handleRowClick" ref="detailRef"

<el-table v-loading="loading" :data="detailList" height="650" @selection-change="handleSelectionChange"  ref="detailRef" :row-key="getRowKeys"
              @row-click="handleRowClick" >
 
      <el-table-column type="selection" width="55" align="center"   :reserve-selection="true"/>
      <el-table-column label="id" align="center" />
</el-table>

2、方法

 

//处理表格行被点击时的操作,记住选中行    
handleRowClick(row, column, event) {
      this.$refs.detailRef.toggleRowSelection(row);
    },

@row-click="handleRowClick"是在 Vue.js 中使用 Element UI 的 <el-table> 组件时的一个事件监听器，用于捕获用户点击表格行的事件。