ant-design-vue 之Tabs 標籤頁

基本代碼

<template>
<div>
  <a-tabs defaultActiveKey="1" @change="callback">
    <a-tab-pane tab="Tab 1" key="1">Content of Tab Pane 1</a-tab-pane>
    <a-tab-pane tab="Tab 2" key="2" forceRender>Content of Tab Pane 2</a-tab-pane>
    <a-tab-pane tab="Tab 3" key="3">Content of Tab Pane 3</a-tab-pane>
  </a-tabs>
</div>
</template>
<script>
export default {
  data () {
    return {
    }
  },
  methods: {
    callback (key) {
      console.log(key)
    },
  },
}
</script>

項目裏面用
< a-tab> <a-tab-pane key="tab2"> </a-tab-pane> </a-tabs>

首先在 < a-tab change="handle">
在  :defaultActiveKey="customActiveKey"
這裏的customActiveKey 要指定默認值和key
 customActiveKey: 'tab1',
 handleTabClick (key) {
     this.customActiveKey = key
    this.isLoginError = true
     
     }

表單提示信息可以在這裏提示錯誤

 <a-alert v-if="isLoginError" type="error" showIcon style="margin-bottom: 24px;" message="驗證碼錯誤" />
 

          <a-alert v-if="isLoginError" type="error" showIcon style="margin-bottom: 24px;" message="賬戶或密碼錯誤" />

然後在數據返回錯誤的時候，將值變爲true

requestFailed (err) {
      this.isLoginError = true
      this.$notification['error']({
        message: '錯誤',
        description: ((err.response || {}).data || {}).message || err || '請求出現錯誤，請稍後再試',
        duration: 4
      })
    }
  }

當切換的時候，錯誤提示消失

   this.isLoginError = true