当前位置 博文首页 > wusq的博客:vue使用深拷贝进行表单清空

    wusq的博客:vue使用深拷贝进行表单清空

    作者:[db:作者] 时间:2021-07-16 13:08

    最近发现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.此方法还适用于有默认值得重置、多字段的重置等,如查询栏的重置

    赶快动手试试吧~?

    cs