Vben Admin 教學 <解決 TableAction 的冒泡問題>

事件冒泡是 Web 開發中常見的一個概念。在 Vue 框架中，如果不正確地處理事件，可能會導致意外的行為，特別是在使用複合組件時。本文將通過一個具體的例子 —— Vben Admin 的 TableAction 組件，來探討如何解決事件冒泡的問題。

事件冒泡簡介

在 DOM（文件物件模型）中，當一個元素觸發事件（如點擊）時，該事件不僅會在該元素上觸發，還會向上冒泡到父元素，進而影響到更高層級的元素。在某些情況下，這會導致意外的事件處理器被觸發。

Vben Admin 的 TableAction 組件

在 Vben Admin 框架中，TableAction 是一個常用的組件，用於在表格中添加操作按鈕。但如果不正確處理，這些按鈕的點擊事件可能會冒泡到表格的行點擊事件上，從而觸發不必要的行為。

問題示例

考慮以下代碼：

<TableAction
  v-if="column.dataIndex === 'action'"
  :actions="[
    {
      label: '刪除',
      popConfirm: {
        title: '確定要刪除嗎',
        placement: 'left',
        confirm: handleActionChick.bind(null, record, false),
      },
    },
  ]"
/>

這裡，TableAction 中的按鈕觸發了 popConfirm，但同時也可能觸發了父元素的事件。

解決方案

解決這個問題的關鍵在於阻止事件冒泡。Vben Admin 提供了一個方便的屬性 stopButtonPropagation，可以用來阻止按鈕事件向上冒泡。

修改後的代碼如下：

<TableAction
  v-if="column.dataIndex === 'action'"
  :actions="[
    {
      label: '刪除',
      popConfirm: {
        title: '確定要刪除嗎',
        placement: 'left',
        confirm: handleActionChick.bind(null, $event, record, false),
      },
    },
  ]"
  stopButtonPropagation="true"
/>

這裡，stopButtonPropagation="true" 告訴 TableAction 組件阻止任何按鈕事件的冒泡，從而解決了問題。

總結

在 Vue 開發中，適當地管理事件冒泡是非常重要的。尤其是在使用複雜的組件框架時，了解並利用框架提供的工具和屬性可以有效避免不必要的問題。在本例中，通過使用 stopButtonPropagation 屬性，我們能夠有效地控制事件在組件之間的傳播，確保應用程序的穩定性和可預測性。