在使用element-ui做一个form表单时发现了一个问题。表单是通过dialog打开的，如果校验未通过关闭了dialog弹窗，再次打开时校验结果未被重置。表单主要用了el-autocomplete和el-input组件。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <el-form-item label="客户" prop="ct_id"> <el-autocomplete ref="ctAutocompleteRef" v-model="formData.ct_name" placeholder="选择客户" clearable size="mini" :fetch-suggestions="ctSearchAsync" :trigger-on-focus="false" :highlight-first-item="true" @select="ctSearchSelect" ></el-autocomplete> </el-form-item> <el-form-item label="未税单价" prop="price"> <el-input type="float" v-model="formData.price" oninput="value=value.replace(/[^?\d.]/g,'')"></el-input> </el-form-item> |
1 2 3 4 5 | // 校验规则 formRules: {<!-- --> ct_id: [{<!-- --> required: true, type: 'integer', min: 1, message: '请正确选择客户', trigger: 'change' }], price: [{<!-- --> required: true, message: '未税单价不能为空', trigger: 'blur' }] } |
1 2 3 4 5 | dialogClosed() {<!-- --> // 关闭dialog执行 this.formData = this.$options.data().formData this.$refs.formRef.clearValidate() } |
通过上面代码可以看出对客户的校验其实校验的是id为正整数，并且大于0。在关闭弹窗时会将整个表单重置为初始值并且清除表单校验。对“单价”这个el-input这么来操作是没有问题的，但是对“客户”这个el-autocomplete第二次打开dialog时校验并没有清空。
查了好久，发现原因在于客户校验的trigger: ‘change’，并且关闭弹窗时将数据重置了，又触发了一次校验。
解决方法：对清除校验加上延时处理
1 2 3 4 5 6 | dialogClosed() {<!-- --> this.formData = this.$options.data().formData setTimeout(() => {<!-- --> this.$refs.formRef.clearValidate() }, 500) } |