| vue使用深拷贝进行表单清空 | 您所在的位置：网站首页 › vue清除表单数据 › vue使用深拷贝进行表单清空 |
vue使用深拷贝进行表单清空
|
最近发现this.$refs[form].resetFields()这个方法并不能将表单清空，它只是把表单重置到初始值。 我在实际项目中遇到的情况是： 1.进入页面首先进行新增操作（表单初始是空值），则重置功能正常 2.进入页面首先进行修改操作（表单默认回显要修改的数据），则在之后的操作执行this.$refs[form].resetFields()，表单的内容都是进入页面时回显的数据 解决办法： 1.在data里定义的表单初始数据是 addForm: { centerName: '', centerCode: '' }, 2.在created深拷贝一份表单初始数据 created() { this.defaultAddForm = JSON.parse(JSON.stringify(this.addForm)) } 3.在需要重置的地方将defaultAddForm的值赋给addForm // 关闭对话框 cancel: function(form) { this.addForm = JSON.parse(JSON.stringify(this.defaultAddForm)) this.$nextTick(() => { this.$refs[form].clearValidate() }) }, 4.使用深拷贝的原因时防止addForm内容的修改影响到defaultAddForm 5.此方法还适用于有默认值得重置、多字段的重置等，如查询栏的重置
赶快动手试试吧~ |
【本文地址】
公司简介
联系我们