Ant Design of Vue表格点击行展开与操作单元格冲突
Ant Design of Vue表格点击行展开与操作单元格冲突问题:使用Ant Design of Vue的Table组件,实现表格嵌套表格,并且点击父表格行展开子表格,由于父表格中有操作单元格,点击编辑或者删除时候,子表格也会切换显示。原因:事件冒泡,点击编辑或者删除时候,点击事件冒泡到父表格行,触发了父表格行的点击事件,才会出现上面的问题。<template>&l...
·
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>
更多推荐
已为社区贡献12条内容
所有评论(0)