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>