ElementUI:el-tabs 切换之前判断是否满足条件

news2025/1/18 2:15:23
   <div class="table-card">
      <div class="card-steps-class">
        <el-tabs
          v-model="activeTabsIndex"
          :before-leave="beforeHandleTabsClick"
        >
          <el-tab-pane name="1" label="基础设置">
            <span slot="label">
              <span class="span-box">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="基础设置 "
                  placement="bottom-start"
                >
                  <i class="el-icon-question"></i>
                </el-tooltip>
                <span>基础设置</span>
              </span>
            </span>
          </el-tab-pane>
          <el-tab-pane name="2" label="流程设计">
            <span slot="label">
              <span class="span-box">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="流程设计 "
                  placement="bottom-start"
                >
                  <i class="el-icon-question"></i>
                </el-tooltip>
                <span>流程设计</span>
              </span>
            </span>
          </el-tab-pane>
          <el-tab-pane name="3" label="高级设置">
            <span slot="label">
              <span class="span-box">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="高级设置 "
                  placement="bottom-start"
                >
                  <i class="el-icon-question"></i>
                </el-tooltip>
                <span>高级设置</span>
              </span>
            </span>
          </el-tab-pane>
        </el-tabs>
      </div>

关键代码: 

 

增加业务逻辑,调用子组件表单验证~~~ 

 methods: {
    beforeHandleTabsClick: function (index) {
      if (this.activeTabsIndex === "1" && (index === "2" || index === "3")) {
        let reValidState = this.$refs.baseForm.sumbitForm();
        if (reValidState) {
          this.activeTabsIndex = index;
          return true;
        }
        return false;
      } else if (
        this.activeTabsIndex === "2" &&
        (index === "1" || index === "3")
      ) {
        return true;
      }
    },
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2256325.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

入职体检心电图不合格的常见情况

心电图&#xff08;ECG&#xff09;是通过记录心脏的电活动来评估心脏健康状况的一项常见检查。它是体检中常见的检查项目之一&#xff0c;尤其对于从事需要高度体力活动的职业&#xff08;如医护、公安、消防等&#xff09;或对心脏健康有特别要求的行业&#xff0c;心电图的结…

释放 AI 潜能:掌握提问策略,让 AI 事半功倍

在这个 AI 大模型快速迭代的时代&#xff0c;人人都能免费使用 AI。然而&#xff0c;很多人却发现&#xff0c;自己与 AI 互动的效果并不理想。这并非 AI 的问题&#xff0c;而是方法不对。输入决定输出&#xff0c;只有掌握正确的提问策略&#xff0c;才能真正释放 AI 助手的生…

AI赋能:构建安全可信的智能电子档案库

在档案的政策与法规上&#xff0c;《中华人民共和国档案法》2020年修订新增&#xff0c;对电子档案的合法要件、地位和作用、安全管理要求和信息化系统建设等方面作出了明确规定&#xff0c;保障数字资源的安全保存和有效利用。 日前&#xff0c;国家档案局令第22号公布《电子…

【计算机网络】实验12:网际控制报文协议ICMP的应用

实验12 网际控制报文协议ICMP的应用 一、实验目的 验证ping命令和tracert命令的工作原理。 二、实验环境 Cisco Packet Tracer模拟器 三、实验过程 1.构建网络拓扑并进行信息标注&#xff0c;将所需要配置的IP地址写在对应的主机或者路由器旁边&#xff0c;如图1所示。 图…

【C语言】程序设计--算法

文章目录 1. 判断两个数的大小并交换2. 计算三角形面积3. 根据x的值计算y4. 字符大小写转换5. 百钱百鸡问题6. 计算公式y的值7. 输出所有的水仙花数8. 计算n的阶乘9. 下三角数据10. 斐波那契数列11. 学生成绩统计12. 数组的平均值1. 判断两个数的大小并交换 介绍: 从键盘输入…

使用IntelliJ IDEA开发Gradle插件并发布到本地

博主所用软件版本为&#xff1a; IntelliJ IDEA 2024.1.4 (Community Edition) Android Studio Ladybug Feature Drop | 2024.2.2 Beta 1 1、制作gradle插件&#xff08;IntelliJ IDEA 2024.1.4&#xff09; 新建groovy工程&#xff0c;File–>New–>Project… 右键点…

Trimble X9三维激光扫描仪高效应对化工厂复杂管道扫描测绘挑战【沪敖3D】

化工安全关系到国计民生&#xff0c;近年来随着化工厂数字化改革不断推进&#xff0c;数字工厂逐步成为工厂安全管理的重要手段。而化工管道作为工厂设施的重要组成部分&#xff0c;由于其数量多、种类繁杂&#xff0c;一直是企业管理的重点和难点。 传统的化工管廊往往缺乏详…

如何实现远程对主机进行关机、重启操作

WGCLOUD是一款开源免费的运维工具&#xff0c;使用简单&#xff0c;安装方便 我们主要通过 WGCLOUD监控系统的指令下发模块&#xff0c; 来实现关机和重启主机的操作 这里以Linux主机为例说明&#xff0c;Windows也是一样的&#xff0c;只是重启主机的命令不同而已&#xff0c…

【批处理脚本】更改Windows系统中的 hosts 解析文件

概述 作用 修改 Windows 系统中的 hosts 文件&#xff0c;可以实现 插入 或 删除 条目。该脚本允许用户以管理员权限执行&#xff0c;将特定的域名解析到指定的 IP 地址 应用场景 非常适用于需要频繁或批量修改 hosts 文件的场景&#xff1a; 屏蔽网站、域名重定向、DNS 污染防…

无人机舵机驱动控制原理!

一、舵机的基本结构和工作原理 舵机是一种位置&#xff08;角度&#xff09;伺服的驱动器&#xff0c;由电子控制与机械控制部分组成。当控制信号输入时&#xff0c;电子控制部分会根据控制器的指令调节直流电机输出的旋转角度和速度&#xff0c;由机械部分转化为控制面的位移…

gozero项目迁移与新服务器环境配置,包含服务器安装包括go版本,Nginx,项目配置包括Mysql,redis,rabbit,域名

迁移 **GoZero** 项目到新服务器并配置相关环境涉及多个步骤。以下是一个系统化的指南&#xff0c;涵盖服务器环境安装、数据库和缓存配置、项目部署以及域名绑定。 ### 步骤概述 1. **服务器环境配置** - 安装 Go 语言环境 - 安装 Nginx - 安装 MySQL 和 Redis -…

华为交换机配置基础

文章目录 华为设备配置视图ensp入门拓扑搭建和IP地址配置IP地址和网关静态路由配置动态路由RIP路由配置 OSPF配置单臂路由【实现不同vlan之间互联互通】console 密码模式AAA认证的原理和配置telnet 远程登录 华为设备配置视图 华为设备登录配置 <AR> system-view //进入…

善于运用指针--通过指针引用数组

一个数组包含若干个元素&#xff0c;每个元素在内存中占用储存单元&#xff0c;它们都有相应的地址&#xff0c;指针变量能指向变量&#xff0c;也可以指向地址。所谓数组元素的地址&#xff0c;也就是数组元素的指针。 文章目录 前言一、在引用数组元素时指针的运算二、通过指…

word poi-tl 图表功能增强,插入图表折线图、柱状图、饼状图

目录 问题解决问题poi-tl介绍 功能实现引入依赖功能介绍 功能实例饼图模版代码效果图 雷达图&#xff08;模版同饼图&#xff09;代码效果图 柱状图&#xff08;模版同饼图&#xff09;代码效果图 附加CustomCharts 工具类CustomChartSingleSeriesRenderData 数据对象CustomCha…

QT数据库SQLite:QsqlTableModel使用总结

数据库连接、数据模型与界面组件所涉及的类之间的关系如下所示&#xff1a; 数据库类 QSqlDatabase 类用于建立与数据库的连接&#xff0c;QSqlDatabase 对象就表示这种连接。QSqlDatabase 类的功能主要分为三大部分&#xff1a; 1、创建数据库连接&#xff0c;即创建 QSqlDat…

[MoeCTF 2022]what are y0u uploading?

[BJDCTF 2020]签个到? 解压后发现两个文件夹&#xff0c;进去发现有个压缩包 这里压缩包打不开&#xff0c;就直接给改成png后缀 发现变成了一个二维码 然后用QR工具扫一下 得到flag NSSCTF{i_am_a_tupian} [MoeCTF 2022]what are y0u uploading&#xff1f; 右击查看源码…

查询品牌涉及两张表(brand、brand_admin_mapping)

文章目录 1、BrandController2、AdminCommonService3、BrandApiService3、BrandCommonService4、BrandSqlService涉及的表SQL 查询逻辑参数处理执行查询完整 SQL 逻辑参数映射总结 SELECT * FROM brand_admin_mapping WHERE admin_id 252SELECT * FROM brand WHERE id 44SELE…

k8s 为什么需要Pod?

Pod&#xff0c;是 Kubernetes 项目中最小的 API 对象&#xff0c;更加专业的说&#xff0c;Pod&#xff0c;是 Kubernetes 项目的原子调度单位。 Pod 是 Kubernetes 里的原子调度单位。这就意味着&#xff0c;Kubernetes 项目的调度器&#xff0c;是统一按照 Pod 而非容器的资…

如何在Ubuntu中利用repo和git地址下载获取imx6ull的BSP

01-设置git的用户名和邮箱 git config --global user.name "suwenhao" git config --global user.email "2487872782qq.com"这里不设置的话后面在第5步的repo配置中还是会要求输入&#xff0c;而且以后进行相关操作都要输入&#xff0c;不妨现在就进行配置…

【机器学习】基于SVM、逻辑回归和CNN的手写数字识别:性能对比与应用分析

基于SVM、逻辑回归和CNN的手写数字识别&#xff1a;性能对比与应用分析 1 基于SVM对手写数字识别2 基于逻辑回归对手写数字进行识别3 基于CNN对手写数字进行识别总结对比分析 1 基于SVM对手写数字识别 在使用SVM方法对手写数字进行识别的时候&#xff0c;我采用了一对多&#…