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）具體的根據自己的需求進行調整。