解决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>