ant design vue table組件中popconfirm按鈕,阻止事件冒泡到表格行事件


 

問題描述:

目前做的項目,在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>

  

 


免責聲明!

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



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