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

最新推荐文章于 2024-08-09 09:44:02 发布

慕宁儿

最新推荐文章于 2024-08-09 09:44:02 发布

阅读量4.3k

点赞数 4

分类专栏： element-UI vue 文章标签： javascript elementui

本文链接：https://blog.csdn.net/stead_fast/article/details/120210333

版权

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

摘要由CSDN通过智能技术生成

问题描述

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

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

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

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

慕宁儿

关注关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

解决Vue中Element resetFields()重置表单不生效的问题（含Cannot read property ‘resetFields‘ of undefined问题解决）

unlilalila的博客

11-25

2万+

解决Vue中Element resetFields()重置表单不生效的问题，解决Cannot read property ‘resetFields‘ of undefined问题

vue3+element-plus表单重置resetFields方法不生效踩坑

最新发布

m0_57454691的博客

08-09

535

this.$refs.ruleForm.resetFields() 是将form表单重置到初始值，并不会清空表单。解决办法：添加 this.ruleForm = this.$options.data().ruleForm。

element表单el-form的resetFields四种失效情况的解决方法汇总

Yunwushenyanying的博客

10-26

5081

本文汇总了el-form的resetFields方法失效的四种常见情景及其解决方法。

elementui 表单 resetFields 方法不生效问题解决

jiangjunyuan168的博客

01-23

1053

调用 elementui 官方提供的表单重置方法 resetFields 方法重置表单不生效，相信很多小伙伴都遇到过这个...

解决Element resetFields()重置表单不生效的问题

Wangjiateng666的博客

11-22

1312

resetFields()不生效的原因 1.此方法用于将form表单的数据设置为初始值 2.而这个初始值是在form mounted生命周期被赋值上去的 3.所以，在 form mounted之前，如果给form表单赋值了，那么后面调用resetFields()都是无效的，因为form表单的初始值已经在 mounted 之前就被赋值了解决方法只要在 form 表单 mounted之后再进行赋值操作这样就可以完美解决问题了，即在点击赋值的时候使用 “this.$nextTick” 方法。上代码！ rese

解决 element-ui resetFields重置方法无效问题

qq_41287158的博客

04-20

1万+

目前发现resetFields()，有以下两种情况可能会导致失效：情况1、el-form-item没有加上prop属性需要重置的表单项el-form-item必须要加上prop属性，并且prop属性的值必须和数据双向绑定的值最后面保持一致 element-ui 提供的文档如图：图例如下：情况2、在mounted之前给表单赋值（mounted DOM未挂载完成）在mounted之前赋值会被当成是初始值，而resetFields方法是将值重置为初始值而不是清空。所以导致没有清空数据。解决办法：

element-plus弹窗中el-form使用resetFields方法不生效

weixin_41586389的博客

08-01

1457

element-plus弹窗中使用el-form resetFields方法失效问题解决

element el-table resetfields() 不生效

飞翔的熊blabla

09-20

1889

博客园首页新随笔联系订阅管理 element el-table resetfields() 不生效 问题场景表单中的重置按钮，调用了resetfields() 方法，不生效 问题原因结合文档对照后，发现是没有为el-form-item设置prop字段总结想让resetfields()生效有2个前提： form要设置ref，且ref值要与 this.$refs[formName].resetFields()中的foemName一致 el-form-item上设置

elementui中form表单 resetFields 失效

pingfanblog

04-24

510

elementui form表单使用 resetFields方法失效

Element ui 重置表单resetField（）方法不生效

m0_60714745的博客

07-11

1450

场景：比如我们需要做一个新增和修改的弹窗，相信各位前端大佬们肯定会把这个弹窗抽出做成一个公共组件，再去写对应功能的时候就会方便许多，但是当我们做成公共组件后，点击编辑，好的没问题，点击新增，诶这个内容是什么情况，这不是上次点击的出现的数据吗？喔天哪，新增的表单里怎么也被提交了，相信大家与遇见这个问题以后肯定会想，在新增的时候给他清空表单就完美解决了，但是当我们去调用resetFields（）方法的时候会发现没有作用，检测了一下代码跟上面没用弹窗的时候一样的啊，为什么没有生效呢？

【Element】解决Element resetFields()重置表单不生效的问题

许失之的笔记

12-09

4822

解决Element resetFields()重置表单不生效的问题前言由于最后在做公司后台在使用 element-ui 框架，开发过程中出现 resetFields表单无法重置的问题，在此记录下解决的办法，也能帮助到以后的同学少踩点坑 1.问题重现因 “添加” 和 “编辑” 字段是一样的，所以我把它们放在了一个弹框表单里面，也节省了代码资源开销，如果你是分开写的弹框也就不会出现这个问题了。重现步骤：进入列表页后，先打开编辑框，然后打开新增框，新增框会填充第一次打开的编辑框内容先打开编辑框再打

element form resetFields失效问题

weixin_43907110的博客

10-27

367

element form resetFields失效问题

vue项目表单中使用resetFields()报错或未生效

蚂蚁搬砖我砌墙

10-07

7362

使用resetFields()报错或未生效的解决方案

elementui form表单resetFields()不生效

一只程序猿

05-20

1000

1、问题出现原因，form表单复用。多次试验结果如下： 1.1、先打开新增弹出框（没有值）再打开修改弹出框（赋值），resetFields()方法可以生效！ 1.2、先打开修改弹出框（赋值），再打开新增弹出框（没有值），此时resetFields()方法不再生效！不管新增还是修改，resetFields()方法都不再生效！哪怕你手动删除值，再次打开依然会存在数据！ 2、原因是这个初始值是在form mounted生命周期被赋值上去的，解决办法使用 $nextTick()方法。注意顺序，弹出框要..

element表单中resetfields()失效

05-12

如果表单数据被修改，resetFields()方法将不起作用。你可以使用this.$nextTick()在下一个事件循环中调用resetFields()方法，以确保表单数据已经被重置。 3. 你还需要确保表单元素的name属性已经正确地设置。...