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

   <div class="table-card"><div class="card-steps-class"><el-tabsv-model="activeTabsIndex":before-leave="beforeHandleTabsClick"><el-tab-pane name="1" label="基础设置"><span slot="label"><span class="span-box"><el-tooltipclass="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-tooltipclass="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-tooltipclass="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.mzph.cn/bicheng/63562.shtml

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

相关文章

java中的数组(2)

大家好&#xff0c;我们今天继续来看java中数组这方面的知识点&#xff0c;那么话不多说&#xff0c;我们直接开始。 一.数组的使用 1.数组中元素访问 数组在内存中是一段连续的空间,空间的编号都是从0开始的,依次递增,数组可以通过下标访问其任意位置的元素. 也可以进行修改…

在 OAuth 2.0 中,refreshToken(刷新令牌)存在的意义

在 OAuth 2.0 中&#xff0c;refreshToken&#xff08;刷新令牌&#xff09; 的主要目的是为了提升用户体验和安全性&#xff0c;同时确保访问令牌的有效性。以下是需要使用 refreshToken 的原因&#xff1a; 1. 访问令牌的有限生命周期 访问令牌&#xff08;accessToken&…

#渗透测试#红蓝对抗#SRC漏洞挖掘# Yakit(6)进阶模式-Web Fuzzer(下)

免责声明 本教程仅为合法的教学目的而准备&#xff0c;严禁用于任何形式的违法犯罪活动及其他商业行为&#xff0c;在使用本教程前&#xff0c;您应确保该行为符合当地的法律法规&#xff0c;继续阅读即表示您需自行承担所有操作的后果&#xff0c;如有异议&#xff0c;请立即停…

Oracle 19c RAC到单机ADG部署及Broker管理配置-最佳实践

一、概述 前面文章列举了几种ADG常见的搭建方式&#xff0c;此处我以最佳的方式作为实践过程演示&#xff1b;架构为RAC到单机&#xff0c;通常这种架构大家用得比较多&#xff1b;这里实践的案例ADG全程是Broker进行管理&#xff0c;Broker其实是ADG非常简单易用的工具&#x…

每日一题 LCR 097. 不同的子序列

LCR 097. 不同的子序列 使用动态规划就可以解决&#xff0c;重点是知道 动态规划的状态是如何转移的 class Solution { public:int numDistinct(string s, string t) {int ns s.size();int nt t.size();vector<vector<long>> dp(ns1,vector<long>(nt1,0)…

如何在 JavaScript 中进行深度克隆?

在 JavaScript 中进行深度克隆&#xff08;deep clone&#xff09;是指创建一个对象的完整副本&#xff0c;并且副本中所有的嵌套对象也被复制&#xff0c;而不是只是引用原始对象中的嵌套对象。深度克隆与浅克隆的主要区别在于&#xff0c;浅克隆只复制对象的引用&#xff0c;…

C# 关于加密技术以及应用(一)

在 开发过程中&#xff0c;加密是一个常见的需求&#xff0c;数字签名和验证、网络通信安全、数据加密解密、用于保护数据的安全性和隐私。如几种常用的加密技术AES、SSL/TLS、RSA、HMAC 、SHA等&#xff0c;都是我们开发过程中常用到的加密方式&#xff0c;只不过每一个加密方…

Python 爬虫 (1)基础 | XHR

一、XHR 1、概念 XHR&#xff0c;全称XMLHttpRequest&#xff0c;是一种在无需重新加载整个网页的情况下&#xff0c;能够更新部分网页的技术。它允许网页的JavaScript代码与服务器进行异步通信&#xff0c;即在发送请求后&#xff0c;浏览器不会阻塞用户的后续操作&#xff0…

二进制部署Prometheus+grafana+alertmanager+node_exporter

Prometheus 是一个开源的监控和告警工具包&#xff0c;旨在提供高可靠性和可扩展性。它最初由 SoundCloud 开发&#xff0c;现已成为云原生计算基金会&#xff08;CNCF&#xff09;的一部分。以下是 Prometheus 的一些关键特性和概念&#xff1a; 1. **时间序列数据库**&#…

工业智能网关如何为企业实现智能制造赋能?

在数字化转型的浪潮中&#xff0c;工业智能网关作为连接物理世界与数字世界的桥梁&#xff0c;正逐步成为智能制造领域的核心组件。本文将通过一个实际使用案例&#xff0c;深入剖析工业智能网关如何助力企业实现生产流程的优化、数据的高效采集与分析&#xff0c;以及智能化决…

算法设计6_随机化算法

随机化算法 随机算法的随机性&#xff08;基本特征&#xff09; – 对于同一实例的多次执行, 效果可能完全不同 – 时间复杂性的一个随机变量 – 解的正确性和准确性也是随机的 数值随机化算法 随机数值算法 – 主要用于数值问题求解 – 算法的输出往往是近似解 – 近似…

使用mmdeploy框架C++预测mask并绘制最小外接矩形

目录 解决目标 逻辑思路 代码实现 第1部分 第2部分 解决目标 这段代码实现了&#xff0c;一个基于深度学习的图像检测程序。它使用mmdeploy框架&#xff0c;加载一个预训练的模型【实例分割模型】来检测图像中的物体。 逻辑思路 程序首先加载模型&#xff0c;然后&#…

Java --- JVM编译运行过程

目录 一.Java编译与执行流程&#xff1a; 二.编译过程&#xff1a; 1.编译器&#xff08;javac&#xff09;&#xff1a; 2.字节码文件&#xff08;.class&#xff09;&#xff1a; 三.执行过程&#xff1a; 1.启动JVM&#xff08;Java虚拟机&#xff09;&#xff1a; 2…

【Makefile】编译日志之输出重定向符号 >

用法1 make all >& compilelog.txt make all > compilelog.txt这两个编译命令在功能上有一些细微的区别&#xff0c;主要在于标准输出和标准错误的处理方式。 make all >& compilelog.txt 这个命令会将标准输出&#xff08;stdout&#xff09;和标准错误&a…

使用 `typing_extensions.TypeAlias` 简化类型定义:初学者指南

使用 typing_extensions.TypeAlias 简化类型定义&#xff1a;初学者指南 什么是 TypeAlias&#xff1f;安装 typing_extensions示例代码&#xff1a;如何使用 TypeAlias示例 1&#xff1a;为简单类型定义别名示例 2&#xff1a;为复杂类型定义别名示例 3&#xff1a;结合 Union…

11.关于vim编辑器的简单配置

1. 说明 在linux系统中编辑文件内容的方式有很多种&#xff0c;比如直接在系统中暗中某些IDE&#xff0c;方便快捷&#xff0c;也可以直接在windows系统中编辑好文件后上传到linux系统中&#xff0c;这些方式对于编写内容较多的文件或者整个项目的文件还是非常适合的。不过有时…

qq空间管理小助手教程代码演示

headers {"Authorization": "Bearer YOUR_ACCESS_TOKEN","Content-Type": "application/json" }# 发布说说示例&#xff08; def post_moment(content):url "https://qzone-api.example.com/post_moment"data {"con…

pytest 的简单介绍

官方文档&#xff1a;pytest 文档 1. pytest 概述 pytest 是一个功能强大的 Python 测试框架&#xff0c;旨在简化单元测试和功能测试的编写与执行。它不仅支持简单的单元测试&#xff0c;还能进行更复杂的测试&#xff0c;如数据驱动的测试、并发测试等。pytest 支持自动化发…

【ArcGIS微课1000例】0133:二维建筑物依据高度生成三维模型

拓展阅读:【ArcGIS Pro微课1000例】0032:创建具有指定高程Z值的矢量数据 文章目录 一、二维面要素拉伸实现三维显示二、依据高度实现要素转3D一、二维面要素拉伸实现三维显示 打开ArcScene软件,加载实验配套数据0133.rar中的建筑物.shp数据,如下图: 数据属性表中的Z为建筑…

快速搭建SpringBoot3+Vue3+ElementPlus管理系统

快速搭建SpringBoot3Vue3管理系统 前端项目搭建&#xff08;默认开发环境&#xff1a;node20,Jdk17&#xff09;创建项目并下载依赖--执行以下命令 前端项目搭建&#xff08;默认开发环境&#xff1a;node20,Jdk17&#xff09; 创建项目并下载依赖–执行以下命令 创建项目 y…