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终端取消vue、prettier警告warn问题
这篇文章主要介绍了Vue终端取消vue、prettier警告warn问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
vue+echarts定时重新绘制以达到刷新的动效问题
这篇文章主要介绍了vue+echarts定时重新绘制以达到刷新的动效问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-06-06
Vue组件传值过程接收不成功的问题及解决
这篇文章主要介绍了Vue组件传值过程接收不成功的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-06-06
Vite创建Vue3项目及Vue3使用jsx详解
vite是新一代的前端构建工具,下面这篇文章主要给大家介绍了关于Vite创建Vue3项目以及Vue3使用jsx的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-08-08
vue结合element-ui使用示例
这一篇主要是创建一个vue项目并结合饿了么框架element-ui的文章。文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-01-01
一文带你了解Vue数组的变异方法
Vue框架提供了一些便捷的数组变异方法，包括push、pop、shift、unshift、splice、sort和reverse等，Vue的数组变异方法可以自动触发DOM更新，本文就详细带大家了解一下Vue.js数组的变异方法
2023-06-06
Vue 中使用 typescript的方法详解
Typescript 5年内的热度随时间变化的趋势，整体呈现一个上升的趋势。也说明ts越来越️受大家的关注了。这篇文章主要介绍了Vue 中使用 typescript的方法详解,需要的朋友可以参考下
2020-02-02
vue + canvas实现涂鸦面板的示例代码
这篇文章主要给大家介绍了vue + canvas实现涂鸦面板的示例,文章通过代码示例介绍的非常详细,感兴趣的小伙伴跟着小编一起来看看吧
2023-08-08
element UI 2.15.13与vue2.0表格勾选回显关键demo
这篇文章主要为大家介绍了element UI 2.15.13与vue2.0表格勾选回显关键demo,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-11-11
Vue实现双向绑定的方法
这篇文章主要介绍了Vue实现双向绑定的方法，了解vue的双向数据绑定原理以及核心代码模块，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12