公司有个需求，在ant-design-vue的标签页上，在tab选项卡头增加文字。

具体需求效果，如下图。

实现原理：

一、主要用到插槽（slot）

二、代码如下：

<a-tabs style="background:#FFFFFF;" v-model:activeKey="activeKey">
        <a-tab-pane key="1" tab="全部" >
          Content of Tab Pane 1
        </a-tab-pane>
        <a-tab-pane key="2" tab="未认领" force-render>Content of Tab Pane 2</a-tab-pane>
        <a-tab-pane key="3" tab="待跟进">Content of Tab Pane 3</a-tab-pane>
        <a-tab-pane key="4" tab="待签约">Content of Tab Pane 4</a-tab-pane>
        <template #tabBarExtraContent>
            <div class="tab" style="display:flex;">
              <div class="tab1">
                13
              </div>
              <div class="tab2">
                9
              </div>
              <div class="tab2">
                7
              </div>
              <div class="tab2 tab3">
                13
              </div>
            </div>
              
        </template>
      </a-tabs>

具体样式，自己手动调。
下面是我的例子：我用的less

//默认右浮动
/deep/ .ant-tabs-extra-content{
  // float: left!important;
  position: absolute;
}
.tab{
  .tab1{
    width: 32px;
    height: 20px;
    background: #FFF1B8;
    border-radius: 10px;
    margin: 13px 78px 0px 48px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    color: #D48806;
    text-align: center;
  }
  .tab2{
    width: 24px;
    height: 20px;
    background: #F0F0F0;
    border-radius: 10px;
    margin: 13px 78px 0px 0px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    font-feature-settings: 'tnum' on, 'lnum' on;
    color: #697089;

  }
  .tab3{
    margin-left: 4px;
  }
}