vue项目中el-table的@row-click事件与行内点击事件冲突问题及解决
作者：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>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。