vue項目中el-table的@row-click事件與行內(nèi)點擊事件沖突問題及解決
更新時間：2026年04月14日 09:35:47 作者：Sunshine_Jian
文章描述了在點擊表格行內(nèi)按鈕時觸發(fā)行點擊事件的問題,分析了事件冒泡的原因,并提出了使用.native.stop來阻止冒泡的解決方案
場景
有一個需求，點擊表格的每一行，展示出相應的詳情彈窗，由于缺少相應的阻止冒泡操作，導致在點擊行內(nèi)按鈕事件的時候，同時也出發(fā)觸發(fā)了行的事件；
- 因為行內(nèi)按鈕的父元素是單元格，而單元格的父元素是行；
- 最里層子元素接收到事件后，再層層向上傳遞給父元素；
單擊行觸發(fā)事件： @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>總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue終端取消vue、prettier警告warn問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue+echarts定時重新繪制以達到刷新的動效問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要介紹了Vue組件傳值過程接收不成功的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
Vite創(chuàng)建Vue3項目及Vue3使用jsx詳解
vite是新一代的前端構(gòu)建工具,下面這篇文章主要給大家介紹了關(guān)于Vite創(chuàng)建Vue3項目以及Vue3使用jsx的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
這一篇主要是創(chuàng)建一個vue項目并結(jié)合餓了么框架element-ui的文章。文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-01-01
Vue框架提供了一些便捷的數(shù)組變異方法，包括push、pop、shift、unshift、splice、sort和reverse等，Vue的數(shù)組變異方法可以自動觸發(fā)DOM更新，本文就詳細帶大家了解一下Vue.js數(shù)組的變異方法2023-06-06
Typescript 5年內(nèi)的熱度隨時間變化的趨勢，整體呈現(xiàn)一個上升的趨勢。也說明ts越來越️受大家的關(guān)注了。這篇文章主要介紹了Vue 中使用 typescript的方法詳解,需要的朋友可以參考下2020-02-02
這篇文章主要給大家介紹了vue + canvas實現(xiàn)涂鴉面板的示例,文章通過代碼示例介紹的非常詳細,感興趣的小伙伴跟著小編一起來看看吧2023-08-08
element UI 2.15.13與vue2.0表格勾選回顯關(guān)鍵demo
這篇文章主要為大家介紹了element UI 2.15.13與vue2.0表格勾選回顯關(guān)鍵demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
這篇文章主要介紹了Vue實現(xiàn)雙向綁定的方法，了解vue的雙向數(shù)據(jù)綁定原理以及核心代碼模塊，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12