ant-design-vue of the Tabs tab

Basic Code

<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>

Inside a project
< 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
     
     }

Forms may prompt an error here

 <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="账户或密码错误" />

Then returns an error in the data when the value becomes true

requestFailed (err) {
      this.isLoginError = true
      this.$notification['error']({
        message: '错误',
        description: ((err.response || {}).data || {}).message || err || '请求出现错误,请稍后再试',
        duration: 4
      })
    }
  }

When switching, error disappears

   this.isLoginError = true
Published 142 original articles · won praise 77 · Views 140,000 +

Guess you like

Origin blog.csdn.net/qq_38845858/article/details/103907142