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

场景

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

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

单击行触发事件： @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>

总结

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