编辑-对话框关闭 el-form的resetFields()不生效的原因

场景

在后台管理系统中，点击“操作”中的编辑，弹出 el-dialog 对话框，对列表项信息进行修改。

回显数据能够正常回显：

但是关闭后再点击新增时，数据没有被清空：

一般在关闭对话框时，都会调用 el-form的resetFields() 方法来清除表单的验证和表单项的值。

按道理来说，在编辑情况下关闭对话框后，表单的验证和表单项的值都被清空了，但当点击“新增”对话框出现时，却是表单项的值没有被清空：

点击编辑的时候，执行showModal.value = true， 就显示dialog。然后立马就执行Object.assign(userForm, row)。

而重点是，resetFields方法是用来把表单重置到初始值的，现在初始值都修改成回显数据了，再怎么调用resetFields都是徒劳

原因

由于Dialog未渲染完毕（组件渲染是异步的），才导致初始值将为第一次对form赋值（赋值是同步的）结果而非空值，那么只需在Dialog渲染结束后才给form赋值就OK了。

这里添加$nextTick，就将赋值过程移出同步任务队列放到微任务队列，当Dialog 渲染完毕后才进行赋值，完美的解决了问题。

解决方案：

只要在 form 表单 mounted 渲染完毕之后再进行赋值操作这样就可以完美解决问题了：