为什么elementui的表格点击click事件会执行两次

最新推荐文章于 2024-05-16 10:57:57 发布
最新推荐文章于 2024-05-16 10:57:57 发布
阅读量3.2k 收藏
点赞数 3
分类专栏： vue框架 文章标签： elementui vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42430948/article/details/119002148
版权

点击下图表格中的多选框列时候，会连续点击两次。
在这里插入图片描述

解决方法：@click.native.prevent 阻止默认事件

<el-table-column width="55">
     <template slot-scope="scope">
       <el-checkbox v-model="scope.row.unshow"  @click.native.prevent="clickCheckBox(scope.$index,scope.row.unshow)"></el-checkbox>
     </template>
</el-table-column>
半夏的前端笔记
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
el-table click事件多次触发_JavaScript从零开始——DOM事件编程（1）
weixin_35701203的博客
02-04 621
事件的本质是程序各个组成部分之间的一种通信方式，也是异步编程的一种实现。DOM 支持大量的事件，本章开始，我们一起看看 DOM 的事件编程。1 概念DOM 的事件操作（监听和触发），都定义在EventTarget接口。所有节点对象都部署了这个接口，其他一些需要事件通信的浏览器内置对象（比如，XMLHttpRequest、AudioNode、AudioContext）也部署了这个接口。该接口主要提供...
el-table 个体行绑定点击事件时 表格中有el-radio和el-checkbox 点击触发两次事件处理方法
weixin_45859470的博客
01-09 2731
在element的table中 使用radio或者checkbox 的单击事件,会导致radio或者checkbox的单击事件触发两次。
vue+elementui怎样点击table中的单元格触发事件--弹框_element ui 点击单元格 打开dialog(2)
最新发布
2401_84433535的博客
05-16 335
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】前端面试题汇总JavaScript前端资料汇总address: '上海市普陀区金沙江路 1518 弄'}, {name: '王小虎',
vue中ElementUi的el-table表格绑定行点击事件
qq_43193513的博客
10-22 2756
【代码】vue中ElementUi的el-table表格绑定行点击事件。
Vue+Element-ui，table表格实现双击事件
rxsm_yqb的博客
06-07 5597
今天在改代码时，使用@dblclick="事件名称"点击没有反应，去网络上找了一下，有很多种方法，如：dbclick改为dblclick。或是添加修饰符.native。但是我全试了一遍，发现并没有用，最后找了半天，发现了一个方法。 代码如下： <el-table border :data="tableData" id="out-table" highlight-current-row highlight-current-row @header-contextmenu="contextme..
vue.js怎样移除绑定的点击事件？
热门推荐
周清城的博客
08-15 2万+
使用v-on:click绑定的事件如何移除？？？ 现在我的处理方式是: "flag && clickEvent()">p> 加上一个标志位来控制点击事件是否能触发. 也可以这样解决： 采用v-if解决： 点击 点击 然后在data里添加unbind=false属性，需要解绑的时候将其设置为true
element el-table radio 单选表格 / 表单实现
alokka的博客
07-09 1155
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui"> <
element，el-table单击事件，双击，单击双击不能同时使用，可以一个使用@click单击事件和双击事件同时使用，一样效果，鼠标按下，经过，移开
qq_34631220的博客
11-25 1873
【代码】element，el-table单击事件。
layui from表单中button触发两次onclick解决
qq_41029937的博客
12-14 1260
button标签添加 type="button" 属性即可
element-ui 当一个按钮单击一行时触发el-table行单击事件，每个用户操作触发两个事件
qq_36437172的博客
04-17 1万+
问题描述：行单击和按钮单击事件具有不同的功能，并且需要仅在每个用户操作时执行函数运行。 行cliked和按钮单击事件在用户单击按钮的同时触发。当click一个单元格内的按钮el-table同时触发行单击事件按钮cliked事件。 <el-table :data="list" border highlight-current-row stripe ...
layui的table单击行勾选checkbox功能方法
10-18
今天小编就为大家分享一篇layui的table单击行勾选checkbox功能方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
element ui中el-radio和el-checkbox点击触发两次事件处理方法
此人很懒，什么都没有写
07-07 6295
参考：https://blog.csdn.net/ChengShengMeJia/article/details/108147612 找了半天原因，后来发现是el-radio被封装多层，根元素不是input， 我认为是由于事件冒泡机制导致的，因为根元素是label，click事件绑定到了label上。 因为点击label的时候，事件冒泡一次，同时会触发关联的input的change事件，导致事再次触发事件。 解决方案 <el-radio-group v-model="radio" @click.n
onclick触发两次,为什么onClick事件触发两次？
weixin_39941262的博客
12-20 719
I have the following html:testWhen I call the following javascript:$('#test1').trigger('click');The onclick event is triggered twice, while I expect it to just trigger once. Because JQuery should look...
el-table中row-click调用两次问题
jl____的博客
09-21 2591
el-table中row-click调用两次问题
click事件点击一次代码执行了两次
meng2lin的博客
09-23 1329
在开发过程中，某个点击事件在第一次加载时，页面没有出现错误，当一个变量id改变后页面再次加载，随之同一个点击事件执行代码执行了两次。这个问题解决了好长时间，一直排查错误，排查不出来。最后在网上找到了方法。 在页面中动态加载相同模块的时候，当触发第二次加载的模块时，有时会连第一个模块的内容随之改变，这是因为为第一个模块注册点击事件时并没有销毁而执行了两遍。 此时需要手动的添加事件移除方法，可以选择在每次事件处理完成后销毁该事件，也可选择在下次事件触发前销毁之前的事件。 在JQuery中存在unbind()方法
vue中点击第一次没有触发按钮怎么操作_vue用ant design中table表格,点击某行时触发的事件操作...
weixin_39620151的博客
12-20 808
使用customRow 设置行属性，写对应事件:customRow="rowClick"然后在data里面写rowClick: record => ({// 事件on: {click: () => {// 点击改行时要做的事情// ......console.log(record, 'record')}}})在官方文档中也写的很清楚补充知识：Ant-Design-Vue table 合...
解决JTable中的按钮有时需要点击两次的问题
zhangjuan2000的专栏
10-27 667
一、Jtable中的按钮有时需要点击两次才能有反应，这样可不行，尝试了半天，才发现解决办法，其实很简单：       在按钮事件的处理代码最后，添加一行：              table.selectAll();         这样就可以保证每点击一次按钮，就会实现相应的按钮处理事件。哈哈~~   二、JFileChooser的外观问题       JFileChoose...
elementUI_el-radio踩坑_设置点击事件会触发两次
qq_43260366的博客
08-15 3982
chooseIdClick方法无需执行两次，仅需要在input点击时触发即可；当运行时，点击按钮，发现chooseIdClick方法执行了两次；我发现elementUI的el-radio标签在封装过程中是这样的。使用了elementUI的单选按钮，点击按钮时对数据进行校验。方法是添加在label标签上的；所以用户点击之后的执行是这样的。......
elementui表格点击事件
07-30
在Element UI的表格中，可以通过在`el-table-column`的`template`标签中添加一个`div`元素来包裹需要绑定点击事件的内容。具体的代码如下所示： ```html <el-table :data="currentPageData" border style="width: 100%"> ... <el-table-column prop="version" label="版本号" width="250"> <template slot-scope="scope"> <!-- 将点击事件绑定在div元素 --> <div @click="lookCfg(scope.row)"> <a href="javascript:;">{{ scope.row.version }}</a> <el-tag type="info" size="small">历史版本</el-tag> </div> </template> </el-table-column> ... </el-table> ``` 在上述代码中，通过在`div`元素上添加`@click`事件来绑定`lookCfg`方法，该方法会在点击事件触发时执行。你可以根据自己的需求来定义`lookCfg`方法的具体逻辑。 #### 引用[.reference_title] - *1* [element ui - el-table给单元格添加点击事件](https://blog.csdn.net/qq_38374286/article/details/127851276)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [elementUI table表格行添加点击事件](https://blog.csdn.net/fd2025/article/details/125571420)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值