ant design vue table元件中popconfirm按鈕,阻止事件冒泡到表格行事件
阿新 • • 發佈:2021-06-23
問題描述:
目前做的專案,在vue ant design vue table元件中,對按鈕應用popconfirm彈窗,此前已經對該table元件應用了:customRow="rowclick"屬性,即註冊了行級事件,在點選表格中的按鈕時同時出發了按鈕事件以及行事件,導致行為衝突。
如下圖所示。在點選表格中移除按鈕時,希望彈窗展示popcoirm內容,但是同時觸發了行事件,彈出了其他頁面。
解決辦法:在按鈕上繫結click.stop=""事件,事件的內容是空,使該按鈕在點選的時候,不會觸發行事件,單不會阻止popconfirm的彈出。
之前直接用click.stop,後面沒有賦值空內容,不好用,然後後面加個賦值為空就可以了,今天發現直接用click.stop又可以了~~~。
<template slot="operation" slot-scope="text, record"> <a-popconfirm placement="top" ok-text="確定" cancel-text="取消" @confirm="removePlanCase([record.id])"> <template slot="title"> <p>確認移除該用例麼?</p> </template> <a @click.stop="">移除</a> </a-popconfirm> </template>