情景描述:
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>