Element-Form表单单独取消某一项的校验

业务场景:
**活动区域下拉框的值,选择为区域二时,显示活动形式(必填项)。
活动区域下拉框的值,选择为区域一时,活动形式则隐藏,因为活动形式为必填项,点保存是走ruleForm检验valid返回false,所以下面代码会报错走 console.log(‘error submit!!’);
**
解决方案如下:

使用>>  :rules={}
:rules="rules"  //注意:rules不能改 ;后面的rules要与data=>return里rules名称相同,根据自己情况写 ;里面的prop也不能少;:model="ruleForm"也不能少
    <el-form-item label="活动形式" prop="desc" v-show="ruleForm.region==2" :rules="{required:changeValue=='2?true:false,message:'请填写活动形式'}"><el-input type="textarea" v-model="ruleForm.desc"></el-input></el-form-item>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="活动名称" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item><el-form-item label="活动区域" prop="region"><el-select v-model="ruleForm.region" placeholder="请选择活动区域"><el-option label="区域一" value="1"></el-option><el-option label="区域二" value="2"></el-option></el-select></el-form-item><el-form-item label="活动形式" prop="desc" v-show="ruleForm.region==2" :rules="{required:changeValue=='2?true:false,message:'请填写活动形式'}"><el-input type="textarea" v-model="ruleForm.desc"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">保存</el-button><el-button @click="resetForm('ruleForm')">取消</el-button></el-form-item>
</el-form>
<script>export default {data() {return {changeValue:	'',ruleForm: {name: '',region: '',desc: ''},rules: {name: [{ required: true, message: '请输入活动名称', trigger: 'blur' },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }],region: [{ required: true, message: '请选择活动区域', trigger: 'change' }],//desc: [//{ required: true, message: '请填写活动形式', trigger: 'blur' }// ]}};},methods: {changeType(val){this.changeValue=val},//保存submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {alert('submit!');//调接口...} else {console.log('error submit!!');return false;}});},//取消resetForm(formName) {this.$refs[formName].resetFields();}}}
</script>

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

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

相关文章

卷积神经网络CNN基础知识

目录 1 前言2 卷积神经网络CNN2.1 LeNet-5相关介绍2.2 CNN基本结构2.2.1 卷积层2.2.2 池化层&#xff08;下采样层&#xff09;2.2.3 全连接层2.2.3.1激励层&#xff08;非线性激活&#xff09;2.2.3.2 线性层2.2.3.3 Dropout层2.2.3.4 总结 2.3 图像的上采样和下采样2.3.1 上采…

WPF学习

1、 <ResourceDictionary.MergedDictionaries> </ResourceDictionary.MergedDictionaries> 这段XAML代码涉及到WPF中的资源字典&#xff08;Resource Dictionary&#xff09;&#xff0c;用于引入外部样式或资源以在您的WPF应用程序中重用。让我逐句解释&#xff…

联盟链学习笔记-网络的创建

联盟链学习笔记 初始网络 下图是初始网络网络N的参考图 排序服务 在定义 网络 N 的时候&#xff0c;第一件事情就是定义一个 排序服务O4。O4 最初被配置并且由组织 R4 的一个管理员来启动&#xff0c;并且由 R4 管理。配置 NC4 包含了描述网络管理能力初始集合的规则。最初…

基于vue的移动端如何监听系统返回

一、问题场景 移动端项目基于vue框架搭建的微服务子应用&#xff0c;每个小功能都是独立存在&#xff1b;当我们退出某个功能页面&#xff0c;返回主页时使用的是手机系统自带的返回功能&#xff1b;未使用程序界面左上角返回按钮&#xff0c;这时候返回逻辑中的清除缓存操作没…

微软开源 windows-drivers-rs,用 Rust 开发 Windows 驱动程序

导读Microsoft Azure 首席技术官兼著名 Windows 软件开发人员 Mark Russinovich 在社交平台上宣布&#xff0c;启动了一个名为 windows-drivers-rs 的新开源项目。 该项目可帮助开发人员使用 Rust 开发 Windows 驱动程序&#xff0c;旨在支持 WDM (Windows Driver Model) 和 W…

【C语言】程序环境和预处理

程序环境&#xff1a; 1、C语言的任何一种实现&#xff0c;存在两个不同的环境&#xff1b; 2、翻译环境&#xff1a;将源代码转换成可执行的二进制指令&#xff08;机器指令&#xff09;&#xff1b;.c文件&#xff08;源文件——文本信息的代码&#xff09;->&#xff0…

微服务12-分布式服务理论基础+Seata的认识

文章目录 分布式服务理论基础前言微服务和分布式的区别CAP定理BASE理论 Seata流程&#xff1a;seata部署微服务集成seata 分布式服务理论基础 前言 单体架构&#xff1a; 1.项目过于臃肿&#xff0c;所有服务在一起&#xff0c;一个业务挂了&#xff0c;整个项目就不能用了&…

腾讯云我的世界mc服务器多少钱一年?

腾讯云我的世界mc服务器多少钱&#xff1f;95元一年2核2G3M轻量应用服务器、2核4G5M带宽优惠价218元一年、4核8G12M带宽轻量服务器446元一年&#xff0c;云服务器CVM标准型S5实例2核2G优惠价280元一年、2核4G配置服务器748元一年&#xff0c;腾讯云百科txybk.com分享腾讯云我的…

人事管理系统springboot42

大家好✌&#xff01;我是CZ淡陌。一名专注以理论为基础实战为主的技术博主&#xff0c;将再这里为大家分享优质的实战项目&#xff0c;本人在Java毕业设计领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目&#xff0c;希望你能有所收获&#xff0c;少走一些弯路…

Vue15 计算属性VS监视属性(侦听属性)

计算属性VS监视属性&#xff08;侦听属性&#xff09; computed和watch之间的区别&#xff1a; 1.computed能完成的功能&#xff0c;watch都可以完成。 2.watch能完成的功能&#xff0c;computed不一定能完成&#xff0c;例如&#xff1a;watch可以进行异步操作。 两个重要的小…

webpack性能优化之打包优化

1、禁止生成 sourceMap 文件 Vue打包时会生成map文件&#xff0c;map文件的作用在于&#xff1a;项目打包后&#xff0c;代码都是经过压缩加密的&#xff0c;如果运行时报错&#xff0c;输出的错误信息无法准确得知是哪里的代码报错。有了map就可以像未加密的代码一样&#xf…

HNU-计算机网络-讨论课1

题目&#xff1a; 有关网络系统结构的讨论 一、必选问题&#xff08;每组平均每人1个&#xff09; 1、分层结构其实是世界演进形成的普遍系统结构&#xff0c;不管是自然领域还是社会领域&#xff0c;请举例说说你的理解。 2、有人说通信网络的核心技术在物理层&#xff0c…

jvm打破砂锅问到底- 为什么要标记或记录跨代引用

为什么要标记或记录跨代引用. ygc时, 直接把老年代引用的新生代对象(可能是对象区域)记录下来当做根, 这其实就是依据第二假说和第三假说, 强者恒强, 跨代引用少(存在互相引用关系的两个对象&#xff0c;是应该倾 向于同时生存或者同时消亡的). 拿ygc老年代跨代引用对象当做根…

Spring Boot 中的 TransactionTemplate 是什么,如何使用

Spring Boot中的TransactionTemplate&#xff1a;简化事务管理 事务管理是任何应用程序中至关重要的部分&#xff0c;特别是在处理数据库操作时。Spring Boot提供了多种方式来管理事务&#xff0c;其中之一是使用TransactionTemplate。本文将深入探讨TransactionTemplate是什么…

设计师都应该知道的事:极简主义家具该怎么去用

这座房子有黑暗而沉重的特征&#xff0c;包括棕色和白色的马赛克浴室瓷砖&#xff0c;弯曲的锻铁壁灯和土黄色的威尼斯石膏墙。但由于房屋与他们的风格相去甚远&#xff0c;白色&#xff0c;干净和简约&#xff0c;接下来我们就着这个方向去帮助房主进行改造。 她解释说&#x…

小谈设计模式(24)—命令模式

小谈设计模式&#xff08;24&#xff09;—命令模式 专栏介绍专栏地址专栏介绍 命令模式角色分析命令&#xff08;Command&#xff09;具体命令&#xff08;ConcreteCommand&#xff09;接收者&#xff08;Receiver&#xff09;调用者&#xff08;Invoker&#xff09;客户端&am…

生物制剂\化工\化妆品等质检损耗、制造误差处理作业流程图(ODOO15/16)

生物制剂、化工、化妆品等行业&#xff0c;因为产品为液体&#xff0c;产品形态和质量容易在各个业务环节发生变化&#xff0c;常常导致实物和账面数据不一致&#xff0c;如果企业业务流程不清晰&#xff0c;会导致系统大量的库存差异&#xff0c;以及财务难以核算的问题&#…

ROS为机器人装配激光雷达

移动机器人在环境中获取障碍物的具体位置、房间的内部轮廓等信息都是非常必要的&#xff0c;这些信息是机器人创建地图、进行导航的基础数据&#xff0c;除上面所讲的Kinect&#xff0c;还可以使用激光雷达作为这种场景应用下的传感器。 激光雷达可用于测量机器人和其他物体之间…

python爬取boss直聘数据(selenium+xpath)

文章目录 一、主要目标二、开发环境三、selenium安装和驱动下载四、主要思路五、代码展示和说明1、导入相关库2、启动浏览器3、搜索框定位创建csv文件招聘页面数据解析(XPATH)总代码效果展示 六、总结 一、主要目标 以boss直聘为目标网站&#xff0c;主要目的是爬取下图中的所…

软件TFN 2K的分布式拒绝攻击(DDos)实战详解

写在前头 本人写这篇博客的目的&#xff0c;并不是我想成为黑客或者鼓励大家做损坏任何人安全和利益的事情。因科研需要&#xff0c;我学习软件TFN 2K的分布式拒绝攻击&#xff0c;只是分享自己的学习过程和经历&#xff0c;有助于大家更好的关注到网络安全及网络维护上。 需要…