ElementUI组件Dialog弹窗再次打开表单仍显示上次数据

问题描述：在使用vue+element开发Dialog嵌套表单的时候，表单交数据关闭之后再次打开表单没有重置，仍显示上次输入的数据。

点击新增，显示弹窗

添加后，数据显示在页面中。当再次点击新增时出现以下界面：仍保留上次的数据，而且若修改表单中数据页面中的数据也会被修改。

根本原因是 form表单对象保留了上次的数据，应该将其置空。

重置方法

嵌套表单的弹窗的代码：

弹窗    //@open事件绑定打开表格时重置       
 取 消确 定

将Dialog弹窗的打开事件绑定方法，然后在方法中使用this.form={}进行重置。

this.form={}这个的意思是把表单初始化为一个空对象，后期可以往这个对象里赋值。

关闭element UI的弹窗，再次打开显示表单验证提示

打开弹窗，没有填写任何信息，点击保存按钮，触发了表单的验证提示，没有进行任何操作，点击【关闭按钮】或者【取消按钮】关闭弹窗，再次打开弹窗，仍然显示表单的验证提示信息，

解决方法

给el-dialog添加@close事件，给取消按钮添加点击事件，在事件中对表单进行重置操作，即可解决

重置表单

this.$refs.dialogForm.resetFields();

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持0133技术站。