在工作中需要这个需求：vue3中使用ant design Vue 的table 组件，点击行除了某一列可以展开子内容，并且一次性只能展开一行
用的属性：
rowKey : 表格行 key 的取值，可以是字符串或一个函数
@expand : 点击展开图标时触发的事件
expandedRowKeys ： 展开的行，控制属性
expandRowByClick : 通过点击行来展开子行
父表：
<a-table
rowKey="key"
:expandedRowKeys="expandedRowKeys"
@expand="open"
:expandRowByClick="true"
:columns="outerLayercolumns"
:data-source="outerLayerdata"
class="components-table-demo-nested"
:scroll="{ x: 1500, y: 670 }"
:pagination="pagination"
>
</a-table>
子表：
<template #expandedRowRender ="{record}">
// 子表内容...
</template>
逻辑代码：
// 只展开一行，其他行隐藏
const expandedRowKeys = ref<number[]>([]);
const open = (expanded:any, record:any) => {
if (expanded) {
expandedRowKeys.value = []
expandedRowKeys.value.push(record.key as number)
} else {
expandedRowKeys.value = []
}
}
这样可以实现单击行只展开一行的子内容，但是还没有实现单击行时除了某一列，只展开一行 我这里是除了最后一列
查阅网上资料发现是这个问题：** Ant Design of Vue表格点击行展开与操作单元格冲突**
参考文章：blog.csdn.net/lydxwj/arti…
原因:
事件冒泡，点击编辑或者删除时候，点击事件冒泡到父表格行，触发了父表格行的点击事件，才会出现上面的问题。
解决办法：
既然是事件冒泡，那就阻止冒泡，vue中有事件修饰符可以解决。
给最后一列的元素最外层加@click.stop=""，此时只需要一个（父表格）
<template v-if="column.key ==='operation'">
<a-tooltip placement="top">
<template #title>
<span>Copy all the HAWB in this row</span>
</template>
<a-tag color="#108ee9" @click.stop="">
<a @click="copyALLHawb(record.innerData)">Copy HAWB No.</a>
</a-tag>
</a-tooltip>
</template>
就可以解决了！！！
