el-form rules动态限制

情景描述:

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>
相关推荐
烛阴3 分钟前
UV Coordinates & Uniforms -- OpenGL UV坐标和Uniform变量
前端·webgl
姑苏洛言7 分钟前
扫码小程序实现仓库进销存管理中遇到的问题 setStorageSync 存储大小限制错误解决方案
前端·后端
烛阴17 分钟前
JavaScript 的 8 大“阴间陷阱”,你绝对踩过!99% 程序员崩溃瞬间
前端·javascript·面试
lh_12541 小时前
ECharts 地图开发入门
前端·javascript·echarts
jjw_zyfx1 小时前
成熟的前端vue vite websocket,Django后端实现方案包含主动断开websocket连接的实现
前端·vue.js·websocket
Mikey_n1 小时前
前台调用接口的方式及速率对比
前端
周之鸥2 小时前
使用 Electron 打包可执行文件和资源:完整实战教程
前端·javascript·electron
我爱吃朱肉2 小时前
HTMLCSS模板实现水滴动画效果
前端·css·css3
机器视觉知识推荐、就业指导2 小时前
开源QML控件:进度条滑动控件(含源码下载链接)
前端·qt·开源·qml
前端snow2 小时前
前端全栈第二课:用typeorm向数据库添加数据---一对多关系
前端·javascript