关于Element-UI中el-form的resetFields()的小坑点

博主用vue和element-ui组件在写前端时,用到了表单部分校验的操作
但是在使用resetFields()时,会有一些不可避免的小坑点,特此记录学习笔记

1.

完成数据的回显

如下图的红圈中,model肯定需要(用于回显数据),rules的绑定其实和需要校验的表单项有关(不校验的话其实用不到,这里就不再贴图),再者prop则是必须的,因为resetFields()这个方法就是根据该属性来的(官网的文档中也有说明)

实现流程大致就是,通过template标签的slot-scope作用域来传入一行的数据到方法中,再用该行的数据赋值给orderForm这个变量中,dialog中的form表单回显该行数据


这样就可以实现数据的回显
如图(第一张图的代码外嵌套了一层el-dialog对话框)

2.

正常一般的处理重置表单项数据以及校验的方式,都是写一个方法来绑定dialog的关闭事件,当关闭事件触发时,就可以直接通过resetFields()方法来重置表单项.
如图

**但是!!!**如果只是使用上述方法来重置的话,在每次关闭对话框时,都会出现初始值一闪而过,因为表单的resetFields()这个方法就是通过保存数据的初始值,在关闭时重置表单来实现的,因此这样对用户的体验不好.
我们可以改用下面的方式

在表单关闭时,清空该行绑定变量orderForm的所有数据,再重置所有的表单项,就可以解决上述问题.

到此为止,算是解决了一个小问题

最大的坑点

如果在修改成功的请求发出,页面重新获取到新数据渲染之后(但是没有刷新页面),再次点击修改的那一行数据.使之回显,然后再关闭对话框,就会发现.该行数据居然再次变回修改前数据
如下图


再点击编辑按钮,并且不做任何处理的情况下关闭对话框

数据又变回了表单的初始值.

(可能和引用相关??)

解决方案:

创建一个新的对象,用来存放该行回显使用的数据,就可以解决上述问题

目前博主只找到创建新的对象方式来解决上述的问题,如果大佬有更好的解决方案,可以在评论区下方留言交流
转载请写明出处