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>