Ant Design of Vue表格點擊行展開與操作單元格衝突

Ant Design of Vue表格點擊行展開與操作單元格衝突

問題：

使用Ant Design of Vue的Table組件，實現表格嵌套表格，並且點擊父表格行展開子表格，由於父表格中有操作單元格，點擊編輯或者刪除時候，子表格也會切換顯示。

原因:

事件冒泡，點擊編輯或者刪除時候，點擊事件冒泡到父表格行，觸發了父表格行的點擊事件，纔會出現上面的問題。

<template>
  <a-table
    rowKey="id"
    :rowSelection="{
      selectedRowKeys: rowSelected,
      onChange: key => rowSelectChange(key)
    }"
    :expandedRowKeys="expandedRowKeys"
    :columns="columns"
    :dataSource="dataList"
    :expandRowByClick="true"
    @expand="expandBtn">
    <template slot="operate" slot-scope="text, record">
      <div @click.stop>
        <a @click="() => editBtn(record)" href="javascript:;">編輯</a>
        <a-divider type="vertical"/>
        <a-popconfirm title="是否刪除?" @confirm="deleteBtn(record.id)">
          <a href="javascript:;">刪除</a>
        </a-popconfirm>
      </div>
    </template>
    <div slot="expandedRowRender" slot-scope="record">
      <a-table
      rowKey="id"
      :showHeader="false"
      :columns="columns"
      :loading="record.loading"
      :pagination="false"
      :dataSource="record.expand" :rowSelection="{ selectedRowKeys: expandedSelected, onChange: key => innerRowSelectChange(key)}" >
      <template slot="operate" slot-scope="value, row">
        <div>
          <a @click="() => editBtn(row)" href="javascript:;">編輯</a>
          <a-divider type="vertical"/>
          <a-popconfirm title="是否刪除?" @confirm="deleteBtn(row.id)">
            <a href="javascript:;">刪除</a>
          </a-popconfirm>
        </div>
      </template>
      </a-table>
    </div>
  </a-table>
</template>

解決辦法：

既然是事件冒泡，那就阻止冒泡，vue中有事件修飾符可以解決。

• 給編輯和刪除分別阻止冒泡（父表格）

  <a @click.stop="() => editBtn(row)" href="javascript:;">編輯</a>
  
  <a-popconfirm title="是否刪除?" @confirm="deleteBtn(row.id)">
   <a @click.stop="" href="javascript:;">刪除</a>
  </a-popconfirm>
  

  注意：刪除的阻止冒泡要加在a-popconfirm內部

• 給編輯表格的最外層加，此時只需要一個（父表格）

  <div @click.stop="">
  	<a @click="() => editBtn(row)" href="javascript:;">編輯</a>
  	<a-divider type="vertical"/>
  	<a-popconfirm title="是否刪除?" @confirm="deleteBtn(row.id)">
  		<a href="javascript:;">刪除</a>
  	</a-popconfirm>
  </div>