Ant Design 依次提供了三级选项卡，分别用于不同的场景。
卡片式的页签，提供可关闭的样式，常用于容器顶部。
标准线条式页签，用于容器内部的主功能切换，这是最常用的 Tabs。
RadioButton 可作为更次级的页签来使用。
切换的时候绑定点击事件 onTabClick 和改变事件 onChange
<template> <a-tabs type="card" @change="onChange" @tabClick="onTabClick"> <a-tab-pane key="key1" tab="选项卡一">选项卡一内容</a-tab-pane> <a-tab-pane key="key2" tab="选项卡二">选项卡二内容</a-tab-pane> <a-tab-pane key="key3" tab="选项卡三">选项卡三内容</a-tab-pane> </a-tabs> </template> <script> export default { methods: { onChange(tabKey) { console.log("tab changed : " + tabKey); }, onTabClick(tabKey) { console.log("tab clicked : " + tabKey); } } }; </script>
原文：https://www.cnblogs.com/dafei4/p/13109781.html