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` 属性来显示选项卡的关闭按钮。