el-form rules动态限制

news/2024/7/7 17:57:12 标签: vue.js, javascript, 前端

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

javascript"><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.niftyadmin.cn/n/5534778.html

相关文章

使用python做飞机大战

代码地址: 点击跳转

2024 年 亚太赛 APMCM (C题)中文赛道国际大学生数学建模挑战赛 | 量子计算的物流配送 | 数学建模完整代码+建模过程全解全析

当大家面临着复杂的数学建模问题时&#xff0c;你是否曾经感到茫然无措&#xff1f;作为2022年美国大学生数学建模比赛的O奖得主&#xff0c;我为大家提供了一套优秀的解题思路&#xff0c;让你轻松应对各种难题&#xff01; 完整内容可以在文章末尾领取&#xff01; 该段文字…

World of Warcraft [CLASSIC] plugin lua

World of Warcraft [CLASSIC] plugin lua 魔兽世界lua脚本插件 World of Warcraft API - Wowpedia - Your wiki guide to the World of Warcraft D:\World of Warcraft\_classic_\Interface\AddOns zwf.lua function CountdownFunc()CountdownFrame CreateFrame("Fram…

Element中的消息提示组件Message和弹框组件MessageBox

简述&#xff1a;在 Element UI 中&#xff0c;Message和MessageBox都是比较常用的组件&#xff0c;Message用来提示消息&#xff0c;而MessageBox是一个用于创建模态对话框的组件。它可以用于在页面上快速展示信息、警告或错误提示&#xff0c;而不会阻止用户的其他操作。简单…

tsconfig.json的include和exclude作用

tsconfig.json中的include和exclude属性用于指定需要被编译的TypeScript文件和需要被排除的文件。‌ include属性&#xff1a;‌用于指定哪些.ts、‌.tsx或.d.ts文件需要被编译。‌如果不指定include属性&#xff0c;‌则默认当前目录下除了exclude之外的所有.ts、‌.d.ts、‌…

基于深度学习的文本检索

基于深度学习的文本检索 文本检索&#xff08;Text Retrieval&#xff09;是指在大量文本数据中&#xff0c;根据用户的查询文本找到相关文档。基于深度学习的方法通过提取文本的高层次语义特征&#xff0c;实现了高效和准确的文本检索。 深度学习在文本检索中的优势 语义理…

Java列表转树形结构工具

不废话&#xff0c;直接上代码 一、工具函数 可以直接使用list2tree()实现列表转树形结构 package com.server.utils.tree;import org.springframework.beans.BeanUtils;import java.lang.reflect.Field; import java.util.ArrayList; import java.util.Collections; import ja…

精准校准:深入解析scikit-learn中的StandardScaler

精准校准&#xff1a;深入解析scikit-learn中的StandardScaler 在机器学习中&#xff0c;特征缩放是一个至关重要的预处理步骤&#xff0c;它能够显著影响模型的性能。scikit-learn提供了一个强大的工具——StandardScaler&#xff0c;用于将数据标准化到单位方差和零均值。本…