1、Tabs官方说明

Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js

2、Badge角标官方效果图

Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js

3、Tabs.TabPane要实现的效果

4、代码

<Tabs v-model:activeKey="activeKey"@change="tabChange"hide-addcenteredtype="card":tabBarGutter="0"><TabPane key="1" tab="一览表" :closable="false" /><TabPane key="2" :closable="false"><template #tab><Badge :dot="showDot">到期提醒</Badge></template></TabPane></Tabs>const activeKey = ref('1')function tabChange(key){.....
}

5、说明

1）key="1" ，是个正常的展示，通过tab直接写

2）key=“2”的时候，要把之前的tab去掉，然后加入<template #tab>这里面是要显示的内容</template>

3) 代码中是显示一个右上角的点的角标，可以直接换成count="1" 这样就会显示一个数字的角标。

4）具体的根据自己的需求进行调整。