ant-design-vue 之Tabs 标签页

最新推荐文章于 2025-12-25 18:28:41 发布

原创最新推荐文章于 2025-12-25 18:28:41 发布 · 1.7w 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

vue 专栏收录该内容

67 篇文章

订阅专栏

本文详细介绍了如何使用Ant Design的Tabs组件实现动态切换面板，并在切换时清除错误提示信息。展示了如何通过回调函数管理和更新激活选项卡的key，以及如何在特定条件下显示和隐藏错误消息。

基本代码

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

当切换的时候，错误提示消失