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