Ant Design Vue 中通过tag关闭tabs

在 Ant Design Vue 中，可以使用 `a-tabs` 和 `a-tab-pane` 组件来实现选项卡功能。如果您想要通过标签页上的关闭按钮关闭选项卡，可以通过自定义选项卡标签来实现。

例如：

<template>
  <a-tabs v-model:selectedTab="selectedTab">
    <a-tab-pane v-for="(pane, index) in panes" :key="pane.key" :tab="renderTabTitle(pane)">
      {{ 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: {
    renderTabTitle(pane) {
      return (
        <span>
          {pane.title}
          <a-icon type="close" class="tab-close-icon" onClick={e => this.handleTabClose(pane.key, e)} />
        </span>
      )
    },
    handleTabClose(key, e) {
      e.stopPropagation()
      const index = this.panes.findIndex(pane => pane.key === key)
      if (index !== -1) {
        this.panes.splice(index, 1)
      }
    }
  }
}
</script>

在上面的示例中，通过在 `renderTabTitle` 方法中自定义选项卡标签，将选项卡标题和关闭按钮放在同一个 `span` 元素中。当点击关闭按钮时，会触发 `handleTabClose` 方法，根据选项卡的 `key` 值来从 `panes` 数组中删除对应的选项卡数据。需要注意的是，在关闭按钮的 `onClick` 事件中，需要调用 `e.stopPropagation()` 方法来防止事件冒泡。同时，可以通过 CSS 样式来美化关闭按钮的样式，例如：

.tab-close-icon {
  margin-left: 8px;
  vertical-align: middle;
  color: #999;
  cursor: pointer;
}

.tab-close-icon:hover {
  color: #f5222d;
}

这样就可以通过标签页上的关闭按钮来关闭选项卡了。