今天有個(gè)新需求，點(diǎn)擊table行，執(zhí)行一些操作。實(shí)現(xiàn)過(guò)程中遇到了：點(diǎn)擊操作列、操作列內(nèi)按鈕會(huì)冒泡觸發(fā)行點(diǎn)擊。antd版本：1.7.8

一、解決方案 customRow

<a-table :customRow="handleClickRow" :data-source="data_list" :columns="columns" bordered rowKey="id" :scroll="{x:true}"><template slot="operation" slot-scope="text, record"><div><a @click.stop="handleAdd('edit', record)"> //阻止冒泡<a-icon type="edit" />編輯</a><a-popconfirm title="確認(rèn)刪除嗎?" @confirm="onDelete(record)"><a @click.stop=""><a-icon type="delete" />刪除</a></a-popconfirm><a @click.stop="handleAdd('look', record)"><a-icon type="eye" />查看</a></div></template>
</a-table>

methods: {//行點(diǎn)擊handleClickRow(record, index){return {on: {click: () => { //行單擊console.log(record, index)}}}},
}

?事件匯總：

1、click 行單擊

2、dblclick 行雙擊

3、contextmenu 右鍵菜單

4、mouseenter 鼠標(biāo)移入

5、mouseleave 鼠標(biāo)移出

事件冒泡：

上面解決方案的bug是：點(diǎn)擊操作欄、操作欄內(nèi)的按鈕，都會(huì)觸發(fā)事件冒泡致行點(diǎn)擊。所以我在每一個(gè)按鈕的點(diǎn)擊事件上都加了阻止事件冒泡 .stop。

還有一點(diǎn)值得注意的是 popconfirm 組件，默認(rèn)點(diǎn)擊 刪除按鈕會(huì)彈框，所以我加了 @click.stop="" 。

以上的解決方案，可以正常點(diǎn)擊操作欄按鈕，點(diǎn)擊操作欄仍會(huì)觸發(fā)行點(diǎn)擊事件，如果覺(jué)得沒(méi)有影響就可以到此為止。如果想要點(diǎn)擊操作欄不觸發(fā)行點(diǎn)擊，解決方案在下方。

二、如何點(diǎn)擊操作欄不觸發(fā)行點(diǎn)擊

固定列 fixed: true

//行點(diǎn)擊handleClickRow(record, index){return {on: {click: (event) => {const rowElement = event.target.closest("tr");const lastCellElement = rowElement.lastElementChild;const clickedCellElement = event.target.closest("td");const isLastColumn = clickedCellElement === lastCellElement;if (!isLastColumn) { //當(dāng)點(diǎn)擊表格最后一列時(shí)，不觸發(fā)行點(diǎn)擊console.log(recore, index)}}}}},

不固定列

    //行點(diǎn)擊handleClickRow(record, index){return {on: {click: (event) => {const lastColumnIndex = this.columns.length - 1;const isLastColumn = event.target.cellIndex === lastColumnIndex;if (!isLastColumn) {this.handleAdd('look', record) }}}}},

以上。

如果我的博客解決了您的問(wèn)題，歡迎評(píng)論、點(diǎn)贊、關(guān)注，一起討論～

?