el-table表格点击该行任意位置时也勾选上其前面的复选框
更新时间：2025年02月12日 11:33:25 作者：Angel_girl319
本文主要介绍了在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);
};到此这篇关于el-table表格点击该行任意位置时也勾选上其前面的复选框的文章就介绍到这了,更多相关el-table 任意位置勾选复选框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
name 属性是可选的,不写它似乎也“没问题”,但其实它在某些场景中非常重要,下面我们来详细说明它的作用和典型用法,感兴趣的朋友跟随小编一起看看吧2025-05-05
这篇文章主要为大家介绍了Vue 组件事件触发和监听实现源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
在Vue中,使用EventBus可以实现组件间的通信,如何使用EventBus？ 都需要做哪些配置呢？他的注意事项是什么呢？下面就跟随小编一起学习一下吧2024-02-02
这篇文章主要介绍了VUE 全局变量的几种实现方式,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了Vue状态管理工具Pinia的安装与使用,一步一步学习如何将pinia运用到项目实战中去,文中有详细的安装教程和使用方法,并通过代码示例讲解的非常详细,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了vue ant design 封装弹窗表单的使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了vue和better-scroll实现列表左右联动效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了vue中的config目录下index.js解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
随着vue3.4版本的发布,defineModel也正式转正了,它可以简化父子组件之间的双向绑定,是目前官方推荐的双向绑定实现方式,下面就跟随小编一起深入了解一下defineModel的使用吧2024-02-02
本篇文章主要介绍了vuejs使用$emit和$on进行组件之间的传值的示例，具有一定的参考价值，有兴趣的可以了解一下2017-10-10
最新评论