ant design vue中的tabs标签页怎么修改单独标签样式

在 Ant Design Vue 中，你可以使用 `tab-bar-extra-content` 和 `tab` 的 `slot-scope` 来修改单独标签的样式。

首先，在 `Tabs` 组件中使用 `tab-bar-extra-content` 插槽，可以在标签页的右侧添加额外的内容，例如按钮或图标：

<template>
  <a-tabs>
    <a-tab-pane key="1" tab="Tab 1">
      Content of tab 1
    </a-tab-pane>
    <a-tab-pane key="2" tab="Tab 2">
      Content of tab 2
    </a-tab-pane>
    <template slot="tab-bar-extra-content">
      <a-button type="primary" icon="plus">Add Tab</a-button>
    </template>
  </a-tabs>
</template>

然后，在 `a-tab` 组件中使用 `slot-scope` 插槽可以自定义标签的样式，例如修改字体颜色、背景色等：

<template>
  <a-tabs>
    <a-tab-pane key="1" :tab="tab1">
      Content of tab 1
    </a-tab-pane>
    <a-tab-pane key="2" :tab="tab2">
      Content of tab 2
    </a-tab-pane>
  </a-tabs>
</template>

<script>
export default {
  data() {
    return {
      tab1: {
        template: '<span slot-scope="{ active }" :style="{ color: active ? \'red\' : \'black\' }">Tab 1</span>',
      },
      tab2: {
        template: '<span slot-scope="{ active }" :style="{ backgroundColor: active ? \'blue\' : \'transparent\' }">Tab 2</span>',
      },
    };
  },
};
</script>

在上面的示例中，我们通过 `slot-scope` 插槽中的 `active` 属性来判断标签是否处于激活状态，然后根据状态来修改标签的样式。