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' }]
		    };
		    //第一步：还是再判断一下然后调接口吧
		    if(isNull(this.obj.a)||isNull(this.obj.b)){
		    	this.$message.error('请填写参数')
				return
			}
			//第二步：然后调接口
			//...
			
		    //我通过下边这种方式直接调接口结果接口重复调用了
			/**this.$resf[formData].validate((valid)=>{
				if(valid){
					//验证完之后调接口
				}
			})**/
		},
		submitFormC(formData){
			this.$nextTick(() => {
			  // 动态更新验证规则后重置表单验证状态
			  this.$refs[formData].clearValidate();
			});
			this.updatedRules = {
		      c: [{ required: true, message: '字段 c 必填', trigger: 'blur' }]
		    };
		    //第一步：还是再判断一下然后调接口吧
		    if(isNull(this.obj.c)){
		    	this.$message.error('请填写参数')
				return
			}
			//第二步：然后调接口
			//...
			
			/**this.$resf[formData].validate((valid)=>{
				if(valid){
					//验证完之后调接口
				}
			})**/
		},
		
    }
    
};
</script>

isNull的方法

export function isEmpty(value) {
  if (value === null) return true; // 未声明
  if (value === undefined) return true; // 未定义
  if (typeof value === 'function') return true; // 空函数

  if (Array.isArray(value) && value.length === 0) return true; // 空数组
  if (value.constructor === Map && value.size === 0) return true; // 空Map
  if (value.constructor === Set && value.size === 0) return true; // 空Set

  if (typeof value === 'string' && value.trim() === '') return true; // 空字符串
  if (typeof value === 'object' && Object.keys(value).length === 0) return true; // 空对象

  if (typeof value === 'number' && isNaN(value)) return true; // NaN
  if (typeof value === 'boolean' && !value) return true; // false
  if (value === 0) return true; // 数字0

  return false; // 非空
}