关于element表单重置resetFields()不生效问题

最新推荐文章于 2025-06-11 13:55:02 发布

原创最新推荐文章于 2025-06-11 13:55:02 发布 · 4.5k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #elementui

vue 同时被 2 个专栏收录

25 篇文章

订阅专栏

element-UI

3 篇文章

订阅专栏

当在Element UI的Dialog弹框中使用表单时，遇到resetFields()无法清除表单数据的问题。问题源于在form mounted后给表单赋值，导致resetFields()无效。解决方法是确保在mounted之后再进行赋值操作，通过改变赋值时机来确保resetFields()能够生效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述

使用element对话框Dialog，添加编辑使用一个弹出框时，发现使用表单重置方法resetFields()不生效，也就是点击编辑之后关闭弹框，再点击添加，此时弹出框表单仍然保留编辑项的内容而不是全新的空表单。

弹框的@close='resetForm'关闭事件绑定了重置表单以及表单验证的方法

resetForm(){
      //重置表单
      this.$refs.form.resetFields();
      //重置表单验证
      this.$refs.form.clearValidate();
},

再三检查表单绑定:model="form",ref="form"，item绑定的prop="name"，以及输入框绑定的v-model="form.name"都是没有问题的，

在这种情况下，resetFields()方法依然不生效

产生原因（此处转载大佬文章，正在努力研究中）

1.此方法用于将form表单的数据设置为初始值
2.而这个初始值是在form mounted生命周期被赋值上去的
3.所以，在 form mounted之前，如果给form表单赋值了，那么后面调用resetFields()都是无效的，因为form表单的初始值已经在 mounted 之前就被赋值了

解决办法

在点击编辑赋值的时候使用 this.$nextTick(function(){})方法，即可以实现在 mounted 之后再进行赋值操作，此时resetFields()就起作用了

修改之前代码

this.dialogFormVisible=true;
this.formTitle=`编辑「${row.name}」模块`;
form.name=row.name;
form.url=row.url;

修改之后代码

this.dialogFormVisible=true;
this.$nextTick(function(){
      this.formTitle=`编辑「${row.name}」模块`;
      form.name=row.name;
      form.url=row.url;
})