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);
};
相关推荐
GISer_Jing4 小时前
SSE Conf大会分享支付宝xUI引擎:AI时代的多模态交互革命
前端·人工智能·交互
Aerelin5 小时前
爬虫playwright中的资源监听
前端·爬虫·js·playwright
WordPress学习笔记5 小时前
专业建外贸网站公司推荐
大数据·前端·人工智能
fruge5 小时前
前端简历优化:如何突出项目亮点与技术深度(附示例)
前端
华仔啊5 小时前
Vue3 + Element Plus 动态菜单实现:一套代码完美适配多角色权限系统
前端·vue.js
n***84075 小时前
Springboot-配置文件中敏感信息的加密:三种加密保护方法比较
android·前端·后端
姜太公钓鲸2335 小时前
Bootstrap是什么?作用是什么?使用场景是什么?如何使用?
前端·bootstrap·html
Aerelin5 小时前
爬虫playwright中的等待机制
前端·爬虫·python
慧慧吖@5 小时前
关于在本地去模拟生产环境检测页面内容注意事项
前端·javascript·vue.js
码农很忙6 小时前
用SpreadJS实现分权限管理:前端技术栈的精准控制实践
前端