el-form rules动态限制

情景描述:
el-form 的ref=“obj” rules 对象obj有a,b,c三个字段,点击按钮a,a和b字段必填,点击按钮c,c字段必填,如何通过 this.$refs.obj.validate((valid)=>{})去判断呢

<template><div><!-- 你的表单组件 --><el-form ref="obj" :model="obj" :rules="updatedRules"><!-- 表单字段 --><el-form-item prop="a" label="字段 a"><el-input v-model="obj.a"></el-input></el-form-item><el-form-item prop="b" label="字段 b"><el-input v-model="obj.b"></el-input></el-form-item><el-form-item prop="c" label="字段 c"><el-input v-model="obj.c"></el-input></el-form-item><el-button type="primary" @click="submitFormAB('obj')">Submit</el-button><el-button type="primary" @click="submitFormC('obj')">Submit</el-button></el-form></div>
</template><script>
export default {data(){return {updatedRules:{}}},watch: {updatedRules: {handler(newVal, oldVal) {// 如果需要,可以在这里处理 rules 变化的逻辑console.log('Rules 发生变化:', newVal);},immediate: true // 组件挂载时立即触发}}methods:{submitFormAB(formData){this.$nextTick(() => {  //这里注意使用了 $nextTick 以便于渲染dom// 动态更新验证规则后重置表单验证状态this.$refs[formData].clearValidate();// 更新完规则后执行验证--备注一下代码// this.$refs.obj.validate();});this.updatedRules = {a: [{ required: true, message: '字段 a 必填', trigger: 'blur' }],b: [{ required: true, message: '字段 b 必填', trigger: 'blur' }]};this.$resf[formData].validate((valid)=>{if(valid){//验证完之后调接口}})},submitFormC(formData){this.$nextTick(() => {// 动态更新验证规则后重置表单验证状态this.$refs[formData].clearValidate();});this.updatedRules = {c: [{ required: true, message: '字段 c 必填', trigger: 'blur' }]};this.$resf[formData].validate((valid)=>{if(valid){//验证完之后调接口}})},}};
</script>

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

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

相关文章

代码随想录-Day50

1143. 最长公共子序列 给定两个字符串 text1 和 text2&#xff0c;返回这两个字符串的最长 公共子序列 的长度。如果不存在 公共子序列 &#xff0c;返回 0 。 一个字符串的 子序列 是指这样一个新的字符串&#xff1a;它是由原字符串在不改变字符的相对顺序的情况下删除某些…

【Linux】supervisor离线源码安装

一、安装meld wget https://pypi.python.org/packages/45/a0/317c6422b26c12fe0161e936fc35f36552069ba8e6f7ecbd99bbffe32a5f/meld3-1.0.2.tar.gz#md53ccc78cd79cffd63a751ad7684c02c91tar -zxvf meld3-1.0.2.tar.gz cd meld3-1.0.2 python setup.py install二、安装supervis…

Linux环境中安装JDK

1.下载安装包 可以通过访问oracle官网&#xff1a;Java Downloads | Oracle 中国 下载对应的安装包。 本文使用的是java8的安装包&#xff0c;包名为&#xff1a;jdk-8u401-linux-x64.tar.gz 2.上传安装包到Linux环境 3.进入/usr目录下&#xff0c;新建一个java的目录&#…

Python数据分析-欧洲经济聚类和主成分分析

一、研究背景 欧洲经济长期以来是全球经济体系中的重要组成部分。无论是在全球金融危机后的复苏过程中&#xff0c;还是在新冠疫情期间&#xff0c;欧洲经济的表现都对世界经济产生了深远的影响。欧洲各国经济体之间既存在相似性&#xff0c;也存在显著的差异。这些差异不仅体…

Linux下QT程序启动失败问题排查方法

文章目录 0.问题背景1.程序启动失败常见原因2.排查依赖库问题2.1 依赖库缺失2.2 依赖库加载路径错误2.3 依赖库版本不匹配2.4 QT插件库缺失2.4.1 QT插件库缺失2.4.2 插件库自身的依赖库缺失 2.5 系统基础C库不匹配 3.资源问题3.1 缺少翻译文件3.2 缺少依赖的资源文件3.3 缺少依…

Unity3D批量修改名称工具

介绍 该工具用于批量修改某游戏对象的一级子对象名称&#xff0c;功能包括批量添加前后缀、批量修改公共名称字段和批量修改为同一名称&#xff0c;包括撤销和恢复功能。 批量添加前后缀可使用预设从指定数字递增或递减至指定数字。 资源下载 GitHub 百度网盘&#xff08…

水果商城系统 SpringBoot+Vue

1、技术栈 技术栈&#xff1a;SpringBootVueMybatis等使用环境&#xff1a;Windows10 谷歌浏览器开发环境&#xff1a;jdk1.8 Maven mysql Idea 数据库仅供学习参考 【已经答辩过的毕业设计】 项目源码地址 2、功能划分 3、效果演示

化工厂定位的意义?如何有效解决管理难题

化工厂定位是运用于工厂人员定位管理的新技术&#xff0c;这一技术的应用具有特殊的意义&#xff0c;和传统管理模式相比具有很大的区别&#xff0c;那么&#xff0c;你是否清楚化工厂定位的意义&#xff0c;它是如何有效的去解决工厂现存的管理难题呢? 传统化工厂管理到底有哪…

PySide6开发桌面程序,PySide6入门实战(上)

文章目录 系列文章索引一、前期准备1、简介及安装2、PyCharm PySide6环境搭建&#xff08;1&#xff09;基础环境&#xff08;2&#xff09;配置QT Designer、PyUIC、PyRCC&#xff08;3&#xff09;使用pyside6项目&#xff08;4&#xff09;资源文件编写与编译 二、QT常用控件…

排序矩阵查找

题目链接 排序矩阵查找 题目描述 注意点 每一行、每一列都按升序排列 解答思路 可以从右上角开始遍历&#xff0c;如果当前元素就等于target&#xff0c;直接返回true&#xff1b;如果当前元素小于target&#xff0c;则target肯定在当前位置下方&#xff1b;如果当前元素大…

基于深度学习的电力分配

基于深度学习的电力分配是一项利用深度学习算法优化电力系统中的电力资源分配、负荷预测、故障检测和系统管理的技术。该技术旨在提高电力系统的运行效率、稳定性和可靠性。以下是关于这一领域的系统介绍&#xff1a; 1. 任务和目标 电力分配的主要任务是优化电力系统中的电力…

挑战杯 LSTM的预测算法 - 股票预测 天气预测 房价预测

0 简介 今天学长向大家介绍LSTM基础 基于LSTM的预测算法 - 股票预测 天气预测 房价预测 这是一个较为新颖的竞赛课题方向&#xff0c;学长非常推荐&#xff01; &#x1f9ff; 更多资料, 项目分享&#xff1a; https://gitee.com/dancheng-senior/postgraduate 1 基于 Ke…

手机飞行模式是什么意思?3个方法教你如何开启

在现代生活中&#xff0c;手机已经成为我们日常生活中不可或缺的一部分。然而&#xff0c;有时我们需要暂时切断手机的通信功能&#xff0c;比如在飞机上、开会时或需要安静休息的时候。这时候&#xff0c;苹果手机上的“飞行模式”功能就派上了用场。 那么&#xff0c;手机飞…

人脸表情识别Facial Expression Recognition基于Python3和Keras2(TensorFlow后端)

人脸表情识别项目是一个结合了计算机视觉和深度学习技术的高级应用&#xff0c;主要用于分析和理解人类面部表情所传达的情感状态。这样的系统可以用于多种场景&#xff0c;比如情绪分析、用户交互、市场调研、医疗诊断以及人机接口等领域。 一个典型的人脸表情识别项目可以分…

端到端自动驾驶新突破:Nvidia提出全并行PARA-Drive,斩获CVPR挑战赛冠军

论文标题&#xff1a; PARA-Drive: Parallelized Architecture for Real-time Autonomous Driving 论文作者&#xff1a; Xinshuo Weng, Boris Ivanovic, Yan Wang, Yue Wang, Marco Pavone 导读&#xff1a; 本文系统分析了自动驾驶高级架构的设计空间&#xff0c;提出了关…

了解安全端口

安全端口的定义和重要性 安全端口是指在网络通信中&#xff0c;用于特定服务或应用程序的端口&#xff0c;这些端口通常被设计为在网络层面提供额外的安全性。安全端口的选择和配置对于保护网络资源免受未经授权的访问和攻击至关重要。 常见的安全端口及其用途 以下是一些常见…

提升内容分享类营销效果的秘籍大公开

今天有丰富实战经验的“蚓链数字化营销平台”来给大家分享一些能有效提高内容分享类数字化营销方案中用户的参与度和转化率的方法。 创造有价值且引人入胜的内容 一定要让分享的内容实用、有趣或者独特&#xff0c;满足大家的需求和兴趣。多运用生动的故事、案例和数据来支持观…

深入分析 Android BroadcastReceiver (十)(完)

文章目录 深入分析 Android BroadcastReceiver (十)1. 深入理解 Android 广播机制的高级应用与实践1.1 高级应用1.1.1 示例&#xff1a;广播启动服务1.1.2 示例&#xff1a;数据变化通知1.1.3 示例&#xff1a;下载完成通知 1.2 实践建议1.2.1 设置权限1.2.2 动态注册和注销广播…

WIN32核心编程 - 线程操作(二) 同步互斥

公开视频 -> 链接点击跳转公开课程博客首页 -> 链接点击跳转博客主页 目录 竞态条件 CriticalSection Mutex CriticalSection & Mutex Semaphore Event 竞态条件 多线程环境下&#xff0c;当多个线程同时访问或者修改同一个数据时&#xff0c;最终结果为线程执…