elementui用resetFields方法重置表单无效问题解决

this.$refs.form.resetFields()

首先我们要知道这个方法是做了什么事,下面是elementui官网给出的解释:

由此可知,这个方法是重置表单为初始值,相信大家和我一样对这个初始值有歧义,其实这个初始值并不是指data中定义的字段值,而是第一次字段被赋值的时候

下面还原博主的问题:

当我页面加载完成数据渲染好后,我先点击修改,弹出框会回显当前行数据,然后关闭窗口我在beforeclose事件中进行了resetFields,等我再点击新增分类时,表单并没有被重置,回显了上一次修改时的值,而不是理想中清空的情况

解决方法,爷直接上代码:

// 重置表单
Object.keys(this.form).forEach((key) => (this.form[key] = ''));

直接遍历表单对象,将每个值手动置空,当然也可以直接this.form.field = value这样一个个去改,能置空就行,只是说如果表单字段有几十个一百个时,我觉得还是循环遍历改好点吧...

因为经常写新增和修改时封装一个共用的弹窗组件,所以需要用到重置表单的操作,这里特地记录一下