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>
相关推荐
程序员爱钓鱼2 小时前
Go语言实战案例 — 项目实战篇:简易博客系统(支持评论)
前端·后端·go
excel9 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着9 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友10 小时前
什么是API签名?
前端·后端·安全
会豪12 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子12 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶12 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子12 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_13 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
Gracemark13 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js