解决element-ui中表格行点击事件和表格单元格点击事件冲突的问题

最新推荐文章于 2024-05-14 11:44:37 发布
最新推荐文章于 2024-05-14 11:44:37 发布
阅读量2.9k 收藏 1
点赞数 1
分类专栏： 小问题分享 文章标签： elementui 点击事件 事件处理机制
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AshesO/article/details/116494609
版权
  • element-ui中如果同时设置了表格行点击事件和表格单元格点击事件的化，当点击单元格的时候会因为事件冒泡触发表格行点击事件，这不是我们需要的
  • 要解决这种事件冲突的问题，只需要在单元格的点击事件上加上修饰符 .navite.stop即可
  • 比如 @click.native.stop=“passStream(scope.row)”
  • 实际上表格行点击事件和表格中的单元格中的任何元素发生点击冲突的时候只要给单元格元素加上 @click.native.stop 属性即可
风高物燥
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决element-ui中下拉菜单子选项click事件不触发的问题
10-18
今天小编就为大家分享一篇解决element-ui中下拉菜单子选项click事件不触发的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue+element-ui实现表格编辑的三种实现方式
10-17
主要介绍了vue+element-ui实现表格编辑的三种实现方式，主要有表格内部显示和编辑切换，通过弹出另外一个表格编辑和直接通过样式控制三种方式，感兴趣的小伙伴们可以参考一下
element row-click表格单行点击和单元格事件冲突解决/冒泡解决
weixin_38684316的博客
04-13 7453
<el-table v-loading="loading" ref="multipleTable" :data="pagination[activeName].tableData" tooltip-effect="dark" style="min-width: 1000px...
elementui中@row-click 和 @row-dbclick 不能同时使用的解决思路
qq_18945257的博客
10-16 2232
在 Element UI 中，@row-click和@row-dbclick是表格组件（el-table）中用于监听行点击和双击事件的两个事件属性。根据 Element UI 的文档，确实不能同时使用这两个事件属性。
element-ui中的table，实现点击当前行就会选中当前行
最新发布
m0_63237100的博客
05-14 377
这样就能实现点击行的任意位置就会选中当前行，但是存在某些特定列被点击的时候不需要选中当前行的情况，比如操作栏中的编辑删除按钮等。这个时候可以给当前列绑定点击事件，加上.stop修饰符就可以了。给el-table绑定row-click事件。handleRowClick的代码如下。
elementui中@row-click和单元格中@click事件冲突解决
Casual_i的博客
03-02 3260
elementui中@row-click和单元格中@click事件冲突解决
element-ui 使用中遇到的问题及处理方法
fmtzy1991的博客
10-25 1105
1.table @selection-change与@row-click解耦合,触发方法内加入这两行: checkData(val, column, event){ event.preventDefault(); //防止@selection-change与@row-click事件耦合 event.cancelBubble = true; //IE适配 2.table @row-click事件与行内@click事件耦合问题，给@click事件
element-table 单元格双击事件冲突问题
baixue0111的博客
02-25 2133
element-table 单元格双击事件 @cell-dbclick与el-switch 的@change事件冲突问题，可试试 event.stopPropagation() 方法
vue el-table @row-click 事件与行内点击事件冲突解决
qq_41513941的博客
03-23 1430
1、按钮是el-button标签，为点击事件加.native.stop ，即 @click.native.stop=“handleClick(scope.row)”2、按钮是原生标签，为点击事件加.stop ，即 @click.stop=“handleClick(scope.row)”
解决vue项目中 el-table 的 @row-click 事件与行内点击事件冲突
热门推荐
Sunshine_Jian的博客
12-22 1万+
场景：点击行内按钮事件的时候，同时也出发触发了行的事件； 因为行内按钮的父元素是单元格，而单元格的父元素是行； 最里层子元素接收到事件后，再层层向上传递给父元素；
elementPlus中table的某一行点击会触发一个事件row-click，如何在某一个单元格点击的时候阻止该事件触发
daodaoaixuexi的博客
07-20 2767
elementPlus的@row-click="handleRowClick"事件，点击某个单元格，不触发该事件
element-ui表格数据转换的示例代码
10-18
主要介绍了element-ui表格数据转换的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
element-ui表格合并span-method的实现方法
10-16
在Element-UI框架中，表格（`el-table`）组件提供了强大的功能，其中包括表格单元格的合并。在处理复杂表格布局时，有时我们需要合并某些行或列以展示更清晰的数据结构。`span-method`属性正是为此目的而设计的，它...
element-ui 表格实现单元格可编辑的示例
08-27
Element UI 表格实现单元格可编辑的示例 Element UI 是一个基于 Vue.js 的桌面端组件库，它提供了丰富的组件和功能，帮助开发者快速构建桌面端应用程序。在实际开发中，经常需要实现表格的可编辑功能，以便用户可以...
element，el-table单击事件，双击，单击双击不能同时使用，可以一个使用@click单击事件和双击事件同时使用，一样效果，鼠标按下，经过，移开
qq_34631220的博客
11-25 1749
【代码】element，el-table单击事件。
el-table单击行row-click与个别列的按钮操作冲突
MengRui2333的博客
05-22 4438
row-click和cell-click都一样。 如果是原生标签，就直接给click事件加.stop 如果是el标签，需要加.native.stop 下面是我的demo，可以参考下↓ <el-table title="双击查看详情" @sort-change="handleSortChange" ref="singleTable" :data="tableData" styl.
element 中row-click表格单行点击和单元格事件冲突解决方案
Cc
06-18 2183
<el-table v-loading="loading" ref="multipleTable" :data="pagination[activeName].tableData" tooltip-effect="dark" style="min-width: 1000px" @selection-change="selectionChange" ...
elementUI el-table @row-click 解决行内冲突--忽略指定列区域点击效果
Sunshine_Jian的博客
12-22 7696
单击el-table行的时候；忽略指定列；
element行点击事件与行内按钮点击事件的同时实现与隔离
本博客暂停使用
12-27 3385
在用vue写前端、用element作ui时，写表格遇到的小问题：点击行触发多选框选中与点击行内的按钮冲突; 如何解决：利用handleRowClick(row, column, event)的column.label将有按钮的列隔离起来即可; 完整的html以及单组件.vue如何去写都贴了出来
给element-ui的按钮绑定点击事件和键盘事件
07-14
要给Element UI的按钮同时绑定点击事件和键盘事件，可以使用`@click`和`@keyup`指令来实现。以下是一个示例： ```html <el-button @click="handleClick" @keyup.enter="handleEnterKey">点击我或按下回车键</el...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值