【前端】解决element-ui的form组件resetFields()方法不生效的问题

最新推荐文章于 2024-04-02 15:16:15 发布
最新推荐文章于 2024-04-02 15:16:15 发布
阅读量2.3k 收藏
点赞数
分类专栏： 前端 文章标签： 前端 ui javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/RogerQianpeng/article/details/131924893
版权
博客聚焦前端组件问题，当输入栏较多时，组件有时只能重置部分输入框的值。解决办法是给每个值赋初始值为空，而非仅定义字段。原因可能是未明确确定初始值，在初始化值较多时易出现异常。

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

问题

使用element-ui的form组件，在输入栏较多的时候，有时resetFields只能重置一部分输入框的值

解决

给每个值赋值初始值为空即可
例如，需要清除的:model="queryForm.bgnTime"、:model="queryForm.endTime"等一系列的值，那么就不要只定义queryForm:{}，而是要把对象下的各个属性赋值初值为空
再使用this.$refs.queryForm.resetFields()之类的方法

原因

在这里插入图片描述

可能的原因是，resetFields只是将字段值重置为初始值，当要初始化的值较多且均未明确确定初始值时，可能会有一定的异常出现em
如果有大佬了解更深入的原因的话，愿闻其详

element-ui、element-plus表单resetFields()无效的坑
m0_58355897的博客
04-22 676
如题目
Element-ui 为什么el-form-item的rules校验规则不生效
星云
10-04 7490
# 原因 ## 错误 ```html <el-form-item :label="label" prop="id"> <el-input v-model="form.id" :placeholder="`请输入${label}`" :rules="rules"/> </el-form-item> ``` ## 改正 ```html <el-form-item :label="label" :rules="rules"
解决elementUI el-form resetFields()方法重置表单无效
zuo-yiran的博客
10-24 6723
问题： 表单操作中resetFields()方法在编辑后再次新增失效。 在开发过程中新增和编辑功能往往使用一个el-form，在新增完成时，执行 resetFields()方法（即：this.$refs[formName].resetFields();），这样再次打开页面时，不会保留原来的数据，但是先给form赋值执行编辑操作，完成时执行resetFields()方法，再次打开进行新增时，会发现数据依然存在，感觉像是resetFields()方法没有起作用。 原因： el-form提供的resetField
element表单el-form的resetFields四种失效情况的解决方法汇总
Yunwushenyanying的博客
10-26 5701
本文汇总了el-form的resetFields方法失效的四种常见情景及其解决方法。
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
10-14
主要介绍了快速解决Vue、element-ui的resetFields()方法重置表单无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
elementui form表单resetFields()不生效
一只程序猿
05-20 1058
1、问题出现原因，form表单复用。多次试验结果如下： 1.1、先打开新增弹出框（没有值）再打开修改弹出框（赋值），resetFields()方法可以生效！ 1.2、先打开修改弹出框（赋值），再打开新增弹出框（没有值），此时resetFields()方法不再生效！不管新增还是修改，resetFields()方法都不再生效！哪怕你手动删除值，再次打开依然会存在数据！ 2、原因是这个初始值是在form mounted生命周期被赋值上去的，解决办法使用 $nextTick()方法。注意顺序，弹出框要..
elementui中form表单 resetFields 失效
pingfanblog
04-24 855
elementui form表单使用 resetFields方法失效
el-form的重置表单（resetFields()）不生效的其他原因
qq_40417349的博客
03-04 1157
经过反复测试，还有一种情况也会导致resetFields失效，如下代码中，在el-form与el-col标签之间还添加了一个template标签，原本用于数据加载时不显示表单内容，但是，经过反复测试发现，它在这个位置会导致resetFields重置表单数据操作失效，具体原因还不清楚；将其删除之后，resetFields操作生效。近日我也遇到了el-form的重置表单（resetFields()）方法不生效的问题，网上查找了很多解答，反复检查我的写法实际上都是符合使用规则的，但是还是不生效，好生奇怪。
vue项目表单中使用resetFields()报错或未生效
热门推荐
蚂蚁搬砖我砌墙
10-07 1万+
使用resetFields()报错或未生效的解决方案
vue.js element-ui validate中代码不执行问题解决方法
10-18
首先，Element UI 的 `el-form` 组件使用 `prop` 属性绑定需要验证的字段，并通过 `el-form-item` 内的自定义验证函数来定义验证规则。在案例中，`checkAge` 和 `checkNumber` 是两个自定义的验证函数，用于确保输入...
element form resetFields无效问题
林剑河的博客
12-10 602
vue element ui
关于element表单重置resetFields()不生效问题
Stead_Fast的博客
09-09 4524
问题描述 使用element对话框Dialog，添加编辑使用一个弹出框时，发现使用表单重置方法resetFields()不生效，也就是点击编辑之后关闭弹框，再点击添加，此时弹出框表单仍然保留编辑项的内容而不是全新的空表单。 弹框的@close='resetForm'关闭事件绑定了重置表单以及表单验证的方法 resetForm(){ //重置表单 this.$refs.form.resetFields(); //重置表单验证 this.$refs.form.cl
elementui 表单 resetFields 方法不生效问题解决
jiangjunyuan168的博客
01-23 1359
调用 elementui 官方提供的表单重置方法 resetFields 方法重置表单不生效，相信很多小伙伴都遇到过这个...
this.$refs[‘form’].resetFields()方法重置表单无效的坑
m0_45858045的博客
02-16 2059
要想this.$refs[‘form’].resetFields()方法有效，必须配置el-form :model 属性和el-form-item中的prop属性，才可以。注意：this.$refs[‘form’].resetFields()这个做法其实是重置表单到初始值，不是清空表单，当表单第一次在页面中渲染时所用的数据就是初始数据。
学习记：解决Vue中Element resetFields()重置表单不生效的问题
m0_70862135的博客
12-28 580
参考了其他博主的思路后，发现自己:model没写进去。
Element ui 重置表单resetField（）方法不生效
m0_60714745的博客
07-11 1742
场景：比如我们需要做一个新增和修改的弹窗，相信各位前端大佬们肯定会把这个弹窗抽出做成一个公共组件，再去写对应功能的时候就会方便许多，但是当我们做成公共组件后，点击编辑，好的没问题，点击新增，诶这个内容是什么情况，这不是上次点击的出现的数据吗？喔 天哪，新增的表单里怎么也被提交了，相信大家与遇见这个问题以后肯定会想，在新增的时候给他清空表单就完美解决了，但是当我们去调用resetFields（）方法的时候会发现没有作用，检测了一下代码跟上面没用弹窗的时候一样的啊，为什么没有生效呢？
element - - - - - Form表单的resetFields()方法没有生效？
Dark_programmer的博客
02-03 1461
element - - - - - Form表单的resetFields()方法没有生效？
​vue+element select筛选框表单重置resetFields()失效
最新发布
Amelia_Liu的博客
04-02 539
本人在项目中使用form的resetFields方法重置搜索框，发现select和date-picker日期控件都不生效，input生效了，后面通过搜索发现是我没写prop属性 ，一加上立马生效。
el-form组件使用resetFields重置失效问题解决，有效避坑
weixin_45755709的博客
12-21 5258
el-form组件使用resetFields重置失效问题解决，有效避坑
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值