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);
};
相关推荐
shmily麻瓜小菜鸡18 分钟前
在 Angular 中, `if...else if...else`
前端·javascript·angular.js
bloglin999991 小时前
npm和nvm和nrm有什么区别
前端·npm·node.js
2501_910227541 小时前
web3 前端常见错误类型以及错误捕获处理
前端·web3
哎哟喂_!2 小时前
Node.js 同步加载问题详解:原理、危害与优化策略
前端·chrome·node.js
__BMGT()2 小时前
C++ QT图片查看器
前端·c++·qt
OK_boom2 小时前
React-useRef
javascript·react.js·ecmascript
未来之窗软件服务2 小时前
solidwors插件 开发————仙盟创梦IDE
前端·javascript·数据库·ide·仙盟创梦ide
小白学大数据2 小时前
基于Scrapy-Redis的分布式景点数据爬取与热力图生成
javascript·redis·分布式·scrapy
Varpb3 小时前
【vue】【环境配置】项目无法npm run serve,显示node版本过低
前端·vue.js·npm
读心悦3 小时前
CSS 溢出内容处理、可见性控制与盒类型设置深度解析
前端·css