ant-design-vue 之Tabs 标签页

我就是我 2021-08-13 15:05 3876阅读 0赞

基本代码

<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

发表评论取消回复

表情：

评论列表（有 0 条评论，3876人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery UI 实例 - 标签页（Tabs）

一种多面板的单内容区，每个面板与列表中的标题相关。如需了解更多有关 tabs 部件的细节，请查看 API 文档 [标签页部件（Tabs Widget）][Tabs Widg

矫情吗；*/ 2024年03月24日 17:57/ 0 赞/ 42 阅读

相关 jQuery EasyUI 布局 - 创建标签页（Tabs）

本教程将向您演示如何使用 easyui 创建一个 Tabs 组件。 Tabs 有多个可以动态地添加或移除的面板（panel）。您可以使用 Tabs 来在相同的页面上显示不同的

ゝ一纸荒年。/ 2024年03月23日 16:22/ 0 赞/ 69 阅读

相关 Tabs 标签页

![在这里插入图片描述][5daa8017173d4819b65bdd2ef45d3c9b.png] <template> <div id="contaion

Love The Way You Lie/ 2024年02月05日 20:14/ 0 赞/ 42 阅读

相关 “tabs标签页” 动手用jQuery封装tabs标签页，可自定义标签位置（上、下、左、右）

刚写一会，明天再更，先把自己写遇到的问题，记录一下问题一已解决关于点击新的tab标签，如何去掉旧标签样式的思路，目前有两个， 1、自己一开始的思路是，va

蔚落/ 2023年06月15日 07:07/ 0 赞/ 32 阅读

相关 Element UI学习5--Tabs 标签页

在很多网页中都运用了标签页，也就是选项卡的功能。之前介绍了用 jquery和 vant组件实现tab栏切换的方法，接下来介绍一下Element UI中Tabs 标签页的使用

朱雀/ 2023年01月07日 14:29/ 0 赞/ 432 阅读

相关 vue ElementUI Tabs 标签页的使用

先在前面附上官网链接 > [ElementUI Tabs 标签页][ElementUI Tabs] 下面是自己写的实际应用在每个tab页嵌套一个form表单，设

叁歲伎倆/ 2022年11月20日 08:14/ 0 赞/ 926 阅读

相关 bootstrap标签页（tab）

Bootstrap 标签页（Tab）插件标签页（Tab）在 [Bootstrap 导航元素][Bootstrap] 一章中介绍过。通过结合一些 data 属性，您可以轻

r囧r小猫/ 2022年05月31日 04:23/ 0 赞/ 333 阅读

相关 Navigation-Tabs标签页

Tabs 标签页:分隔内容上有关联但属于不同类别的数据集合。 1、基本使用 Tabs 组件提供了选项卡功能，默认选中第一个标签页，你也可以通过 value（v-model

亦凉/ 2022年03月30日 03:27/ 0 赞/ 367 阅读

相关 Tab标签

实现类似IE7的Tab标签风格.效果如下: ![untitled.JPG][] ![ContractedBlock.gif][] ![ExpandedBl

谁借莪１个温暖的怀抱￠/ 2021年12月11日 19:47/ 0 赞/ 275 阅读

相关 ant-design-vue 之Tabs 标签页

基本代码 <template> <div> <a-tabs defaultActiveKey="1" @change="callback">

我就是我/ 2021年08月13日 15:05/ 0 赞/ 3877 阅读