vue项目中el-table的@row-click事件与行内点击事件冲突问题及解决

更新时间：2026年04月14日 09:35:47 作者：Sunshine_Jian

文章描述了在点击表格行内按钮时触发行点击事件的问题,分析了事件冒泡的原因,并提出了使用.native.stop来阻止冒泡的解决方案

场景

有一个需求，点击表格的每一行，展示出相应的详情弹窗，由于缺少相应的阻止冒泡操作，导致在点击行内按钮事件的时候，同时也出发触发了行的事件；

因为行内按钮的父元素是单元格，而单元格的父元素是行；
最里层子元素接收到事件后，再层层向上传递给父元素；

单击行触发事件： @row-click="openDetail"

<el-table
   id="out-table"
   style="width: 100%"
   :data="tableData"
   :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
   @row-click="openDetail"
>

解决办法

在相应的点击事件上加 .native.stop

因为是不是原生标签；而是el，所以.native必须加；

<el-table-column label="操作" width="200">
    <template slot-scope="scope">
    <el-button
        type="text"
        size="medium"
        @click.native.stop="editTable(scope.row)"
        >编辑</el-button
    >
    <el-button
        type="text"
        size="medium"
        @click.native.stop="delTable(scope.row.id)"
        >删除</el-button
    >
    </template>
</el-table-column>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

在vue中实现跨域方法小结
在Web开发中,跨域问题是一大挑战,跨域是指网络请求从一个域名发起,而请求的目标资源位于另一个不同的域名下,通常使用Vue CLI的代理来解决跨域问题,而在生产环境中,可以通过后端配置CORS或使用Nginx反向代理,或者通过服务器中转来解决跨域问题
2023-10-10
vue如何通过$router.push传参数
这篇文章主要介绍了vue如何通过$router.push传参数，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06
vue集成百度UEditor富文本编辑器使用教程
这篇文章主要为大家详细介绍了vue集成百度UEditor富文本编辑器的使用教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-09-09
Vue router配置与使用分析讲解
第一次写Vue项目，要用到router.js,看了一下官方文档，还是很懵逼，不知道怎么配置，又去看视频查资料，最后终于搞定了。话不多说，先上代码，我再讲一些要注意的细节
2022-12-12
前端 Vue.js 和 MVVM 详细介绍
这篇文章主要介绍了前端 Vue.js 和 MVVM 详细介绍的相关资料,需要的朋友可以参考下
2016-12-12
vue实现简易图片左右旋转,上一张,下一张组件案例
这篇文章主要介绍了vue实现简易图片左右旋转,上一张,下一张组件案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
详解Vue的Pinia如何做到刷新不丢数据
Pinia 是 Vue 3 的官方推荐状态管理库,旨在替代 Vuex,提供更简单、直观的状态管理解决方案,Pinia 的设计理念是简单、易于学习和使用,本文给大家详细介绍了Vue的Pinia如何做到刷新不丢数据,需要的朋友可以参考下
2025-01-01
vue路由同步加载与异步加载使用详解
配置路由时,同步加载适合小型项目,响应快但首屏体积大；异步加载按需加载,优化性能但有延迟,混合策略结合两者,分组懒加载和加载状态处理为优化手段
2025-08-08
Vue 3.0 项目创建过程及解决方案
这篇文章主要介绍了Vue 3.0 项目创建过程，首先要确保电脑上已安装node.js,确保已安装 Vue CLI,本文结合实例代码给大家介绍的非常详细，需要的朋友可以参考下
2024-04-04
vue.js中关于点击事件方法的使用(click)
这篇文章主要介绍了vue.js中关于点击事件方法的使用(click)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08