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 任意位置勾选复选框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了关于vite+vue3打包部署问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
这篇文章主要介绍了解决vux 中popup 组件Mask 遮罩在最上层的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了vue3 使用socket的完整代码,包括vue3客户端和服务端的实例讲解,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-03-03
这篇文章主要为大家详细介绍了vue3如何在单个组件中实现类似mixin的事件调用,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-01-01
通过配置多页面应用，从而将给子模块依赖分隔开各自加载，可以减少初始资源的请求，加快页面的访问速度，这篇文章主要介绍了vue3+vite配置多页面的详细过程,需要的朋友可以参考下2023-06-06
Vue 路由间跳转和新开窗口的方式（query、params）
这篇文章主要介绍了Vue 路由间跳转和新开窗口的方式，本文主要通过query方式和params方式介绍,需要的朋友可以参考下2019-12-12
这篇文章主要介绍了Vuejs监听vuex中值的变化的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要介绍了TypeScript在vue中的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
Element-Ui组件 NavMenu 导航菜单的具体使用
这篇文章主要介绍了Element-Ui组件 NavMenu 导航菜单的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
这篇文章主要介绍了Vue实战教程之仿肯德基宅急送App，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
最新评论