ant design vue 关闭tab事件方法

在 Ant Design Vue 中，可以使用 a-tabs 和 a-tab-pane 组件来实现选项卡功能。如果您想要在关闭选项卡时触发事件，可以通过监听 on-tab-remove 事件来实现。
例如：
<template>
<a-tabs v-model:selectedTab="selectedTab" @on-tab-remove="handleTabRemove">
<a-tab-pane v-for="(pane, index) in panes" :key="pane.key" :tab="pane.title" :closable="index > 0">
{{ pane.content }}
</a-tab-pane>
</a-tabs>
</template>

<script>
export default {
data() {
return {
selectedTab: '1',
panes: [
{ key: '1', title: 'Tab 1', content: 'Content of Tab Pane 1' },
{ key: '2', title: 'Tab 2', content: 'Content of Tab Pane 2' },
{ key: '3', title: 'Tab 3', content: 'Content of Tab Pane 3' }
]
}
},
methods: {
handleTabRemove(targetKey) {
const index = this.panes.findIndex(pane => pane.key === targetKey)
if (index !== -1) {
this.panes.splice(index, 1)
}
}
}
}
</script>

在上面的示例中，a-tabs 组件的 on-tab-remove 事件会在关闭选项卡时触发，handleTabRemove 方法会根据选项卡的 key 值来从 panes 数组中删除对应的选项卡数据。同时，可以通过给 a-tab-pane 组件设置 closable 属性来显示选项卡的关闭按钮。