新增和编辑共用同一个弹窗时,当第一次打开为编辑并且进行了表单验证。如果第二次打开弹窗为新增,初始化数据为空之后,数据变化会自动触发表单验证。为避免新增打开弹窗时触发表单验证有如下两种方法
方法一
表单验证规则中,trigger属性去掉change,数据变化将不会验证表单
trigger属性为表单验证触发的条件,
trigger的值选blur,即失去焦点时进行验证
trigger的值选change,即数据变化点时进行验证
<el-form
:model="numberValidateForm"
>
<el-form-item
label="年龄"
prop="age"
:rules="[
{ required: true, message: '年龄不能为空', trigger: ['blur']},
]"
>
<el-input v-model.number="numberValidateForm.age" />
</el-form-item>
</el-form>
方法二
弹窗打开前的回调方法中清除表单验证
如果想保留数据变化时自动验证表单,可是使用方法二,
表单的clearValidate方法会移除表单项的校验结果
<el-dialog
ref="form"
:visible.sync="dialogVisible"
@open="handleOpen"
>
</el-dialog>
handleOpen() {
this.$nextTick(() => {
this.$refs['form'].clearValidate()
})
},