vue 表格阻止父元素冒泡事件


思路如下:
1.給復選框定義一個類型,type="selection"
2.在點擊函數中就可以使用判斷條件來進行復選框的阻止冒泡。
rowDetailShow(row, event, column) {
if(column.type !== 'selection') {
this.selectedItem = row
this.detailShow = true
}
this.tableIndex = row.tableId
},
這樣是一種方法,因為復選框一般都是與表格同步存在的。
還有一種簡單的方法,就是在@click的后面加.stop,就成了這樣,@click.stop="collectStar",這個知識點關聯的是,vue里面的知識,在文檔中的事件修飾符一欄中,我們可以看到:
<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件偵聽器時使用事件捕獲模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當事件在該元素本身(而不是子元素)觸發時觸發回調 -->
<div v-on:click.self="doThat">...</div>

這里就先談這些,有些深層次的東西,待接觸到再深究。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM