el-table表格点击该行任意位置时也勾选上其前面的复选框

需求:当双击表格某一行任意位置时,自动勾选上其前面的复选框

1、在el-table 组件的每一行添加@row-dblclick事件,用于双击点击

复制代码
  <el-table
        :data="tableData"
        ref="tableRef"
 @selection-change="handleSelectionChange"
        @row-dblclick="handleRowClick"
      >
<el-table-column type="selection" fixed width="55" align="center" />
        <el-table-column
          type="index"
          fixed
          label="序号"
          width="75"
          align="center"
        />
</el-table>

2、定义方法在 `handleRowClick` 方法中,通过修改 `row` 对象中的某个属性来标记该行是否被选中,调用 `toggleRowSelection` 方法来切换多选框的勾选状态。

const sourceRef = ref();

复制代码
//双击
const handleRowClick = (row) => {
  console.log(row, "双击--");
  row.isSelected = !row.isSelected;
  tableRef.value.toggleRowSelection(row);
};
相关推荐
只会安静敲代码的 小周4 分钟前
uniapp上传图片时(可选微信头像、相册、拍照)
前端·微信·uni-app
kovlistudio21 分钟前
红宝书第四十六讲:Node.js基础与API设计解析
前端·javascript·node.js
陈哥聊测试22 分钟前
这款自研底层框架,你说不定已经用上了
前端·后端·开源
m0_zj28 分钟前
41.[前端开发-JavaScript高级]Day06-原型关系图-ES6类的使用-ES6转ES5
开发语言·javascript·es6
蘑菇头爱平底锅37 分钟前
数字孪生-DTS-孪创城市-低空范围
前端·javascript·数据可视化
KenXu39 分钟前
Module Federation v0.12新特征详解
前端
avocado_green1 小时前
【学习笔记】从mobx迁移到redux时的概念映射
javascript
三原1 小时前
前端微应用-乾坤(qiankun)原理分析-沙箱隔离(css)
前端·架构·前端框架
琦遇1 小时前
Vue3使用AntvG6写拓扑图,可添加修改删除节点和边
前端·javascript·vue.js
Luckyfif1 小时前
🗣️面试官:有一个比较经典的 case 也想探讨一下 「页面白屏如何排查?」❤️✨
前端·面试·开源