el-dialog校验残留 重置校验失败 resetFileds失效的斗争

问题现象：

使用el-dialog作为子组件的时候，新增和编辑是同一个弹窗，

先打开编辑，取消，再打开新增弹窗会弹出校验。

先打开编辑

再打开

且关闭前会短暂显示之前编辑框的内容

 

问题分析：

首先 this.$refs.Form.resetFileds 是清空校验并重置为初值。

因为el-dialog是用 visible.sync 绑定的，

只是控制显示和隐藏，并不会重新渲染组件。

这个组件在父组件页面生成的时候就已经挂载上去了。

所以，refs在第一次接到Form的值，也就是第一次点击编辑的值的时候，

就已经把他当作初值了。

之后重置清校验都会重置为这个初值。

 

解决方案：

开始是想着在父组件调用的时候在子组件外面套一层v-if，

让他强制重新渲染，

但是这导致每次都要重新请求全国地址的接口。

每次重新渲染也显然不是最好的解决办法。

之后又发现了一个重要之处。

 

之所以新增打开时会触发验证，是因为rules的规则里

{required: true, message: '请输入收货人', trigger: 'change'}, ],

每次打开，父组件就会向子组件传值更新form表单里的值，触发了change的校验

如果输入为空的话，就会触发必填校验。

所以正确的做法是

{required: true, message: '请输入收货人', trigger: 'blur'}, ],

在失去焦点再校验。

而且为了不让他强行赋为初值，

把this.$refs.Form.resetFileds改为this.$refs.Form.clearValidate()