Vue中element-ui的resetFields()方法重置表单无效问题及解决办法

Posted 2023-02-28

参考技术A

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

2.表单项el-form-item没有添加prop属性，prop属性需要与input框绑定的属性一致

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

那何时清空这个数据最合理呢？
我选择在弹窗关闭的事件回调中清空。原因为点击取消关闭弹框要清空，点击确定完成操作要清空，点击关闭要关闭并清空，点击空白也是关闭弹窗并清空。所以选择弹框的closed回调中清空数据。

针对二
检查属性对应的。确保书写没问题。