Vue中重置表单无效问题及解决办法

 

 

1、使用 resetField() 之前 el-form 一定要加 ref 属性

2、表单项 el-form-item 没有添加 prop 属性，同时 prop 属性值需与表单项的 v-model 保持一致

3、当新增和编辑都同用一个弹窗实现的时候，此时无法达到清除表单的效果。
注意：resetField()方法不是将表单重置为空，而是重置为初始值
而这个初始值是如何定义的呢？
初始值的定义应该为第一次打开弹窗的值。换句话说，如果是打开新建的表单，那么初始值就都为空，如果打开是编辑的弹窗表单，那么初始值就为编辑的。（具体没有看源码深层次确定）

解决针对3方法

清空一下formData的数据。
注意点，清空不可以直接等于{}。我采取的方法为写一个公共的方法，递归将其属性都赋值为null 或者 ""。如下方式不可取

this.formData={} 
// 这种写法有弊端，相当于对其重新赋值，会将其中的属性都改为不是双向绑定都数据。（由于vue双向绑定原理决定）
// 所以不要这样写

在弹窗关闭的事件回调中清空。原因为点击取消关闭弹框要清空，点击确定完成操作要清空，点击关闭要关闭并清空，点击空白也是关闭弹窗并清空。所以选择弹框的closed回调中清空数据。 

// 弹框关闭事件 - 清空所有数据，保留属性
clearAllFormData(){   
    this.$refs['refFormData'].resetFields()  // 这里可以换做移除样式的方法clearValidate
    this.formData = copyProps(this.formData)  
 }