How to use the ant-design-vue.Tabs.TabPane function in ant-design-vue

import {
  Component, Prop, Emit, Vue, Watch, Provide,
} from 'vue-property-decorator';
import { Tabs } from 'ant-design-vue';
import config from '@/utils/config';
import { menuItem } from '@/interface';

import Header from '@/components/Layout/Header/Header';
import Sidebar from '@/components/Layout/Sidebar/Sidebar';
import './AppMain.less';

@Component({
  components: {
    'a-tabs': Tabs,
    'a-tab-pane': Tabs.TabPane,
  },
})
export default class AppMain extends Vue {
  @Prop() private menuData!: menuItem[];

  // data
  onTabs: any = '1';

  @Watch('$route', { immediate: true, deep: true })
  routeChange(to: any, from: any) {
    this.$store.dispatch('AddTabPane', to.path);
  }

  @Emit()
  removeTab(name: string) {
    console.log(this);

}),
  components: {
    AGridContent: GridContent,
    ACard: Card,
    ARow: Row,
    ACol: Col,
    AChartCard: ChartCard,
    AField: Field,
    ATooltip: Tooltip,
    AIcon: Icon,
    ATrend: Trend,
    AMiniProgress: MiniProgress,
    // AMiniBar: MiniBar,
    // AMiniArea: MiniArea,
    ATabs: Tabs,
    ATabPane: Tabs.TabPane,
    ARangePicker: DatePicker.RangePicker,
    ANumberInfo: NumberInfo
  },
  methods: {
    yuan,
    numeral
  }
};

<style lang="less"></style>

statusCode: '',
            protocal: '',
            reqHeader: {},
            resHeader: {}
          }
        }
      }
    },
    components: {
      JsonViewer,
      [Table.name]: Table,
      [Drawer.name]: Drawer,
      [Collapse.name]: Collapse,
      [Collapse.Panel.name]: Collapse.Panel,
      [Tabs.name]: Tabs,
      [Tabs.TabPane.name]: Tabs.TabPane
    },
    name: 'network-detail',
    data () {
      return {
        cookieColumns
      }
    },
    methods: {
      onClose () {
        this.$emit('input', false)
      },
      codeClassName (statusCode) {
        if (parseInt(statusCode) >= 400) {
          return 'red'
        } else if (parseInt(statusCode) === 200) {
          return 'green'

import SendCaptchaButton from "@/components/SendCaptchaButton";
import { mapGetters } from "vuex";
export default {
  name: "ai-login",
  data: () => ({
    activeKey: "2",
    active: [],
    submitting: false,
    autoLogin: false,
    start: false
  }),
  components: {
    AForm: Form,
    AFormItem: Form.Item,
    ATabs: Tabs,
    ATabPane: Tabs.TabPane,
    AButton: Button,
    ACheckbox: Checkbox,
    AInput: Input,
    AIcon: Icon,
    ARow: Row,
    ACol: Col,
    ASendCaptchaButton: SendCaptchaButton
  },
  methods: {
    onSwithAutoLogin(e) {
      this.autoLogin = e.target.checked;
    },
    onSwitchTab(key) {
      this.active = [];
      if (key === "1") {
        this.active.push("username");