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

最新推荐文章于 2023-12-28 20:08:42 发布
最新推荐文章于 2023-12-28 20:08:42 发布
阅读量180 收藏
点赞数
文章标签： vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sudo0m/article/details/131730199
版权

问题重现：进入列表页后，先打开编辑框，然后打开新增框，新增框会填充第一次打开的编辑框内容

代码流程：打开编辑页面给编辑框传入值，然后调用 this.$refs[forName].resetFields()

resetFields()方法官网的解释

Snipaste_2023-07-14_19-05-52

也就是说在调用弹窗传入值的时候就把初始值更改了，那么后面调用resetFields()都是无效的，因为form表单的初始值已经在 mounted 之前就被赋值了

所以我们要在 form 表单 mounted之后再进行赋值操作这样就可以完美解决问题了

可以使用 nextTick()方法

错误代码

Snipaste_2023-07-14_19-14-23

正确代码：

Snipaste_2023-07-14_19-12-21

sudo0m
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
element的resetFields重置失败，在编辑后，再次点击新增弹框回显了修改行的数据
m0_58185022的博客
04-12 229
使用this.$refs.form.resetFields进行表单重置，操作第一次点击弹框为新增状态时，表单重置成功，第一次点击弹框为编辑状态时，再次点击新增，会回显第一次点击修改时的表单的值，表单重置失败，很显然，重置效果是生效的，当第一次点击弹框的状态为编辑时，已经给form表单填上了数据，重置表单读取的是表单第一次渲染完成时form的值，那么表单渲染完成前，将这个form表单值置空就行了。
element表单重置不生效问题
weixin_60537353的博客
11-28 917
element 表单resetFields()函数不生效问题
element表单el-form的resetFields四种失效情况的解决方法汇总
Yunwushenyanying的博客
10-26 4315
本文汇总了el-form的resetFields方法失效的四种常见情景及其解决方法。
学习记：解决Vue中Element resetFields()重置表单不生效的问题
m0_70862135的博客
12-28 443
参考了其他博主的思路后，发现自己:model没写进去。
Vue、element-ui的resetFields()方法重置表单无效问题及解决办法
JEECG官方博客
03-15 2586
问题： 使用this.$ref[‘form‘] .resetFields()无法重置表单项 原因： 1.没有给表单添加ref属性 <el-form ref="form"></el-form> 2.表单项el-form-item没有添加prop属性，prop属性需要与input框绑定的属性一致 <el-form ref="form" :model="sizeForm" label-width="80px" size="mini"> <el-form-item lab
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
10-14
主要介绍了快速解决Vue、element-ui的resetFields()方法重置表单无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue+ element ui 表单验证有值但验证失败问题
10-15
主要介绍了vue+ element ui 表单验证有值但验证失败，本文通过实例代码给大家分享解决方案，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
基于Vue的Element UI表单设计及代码生成器设计源码
最新发布
04-09
本项目是基于Vue的Element UI表单设计及代码生成器设计源码，包含179个文件，其中120个JavaScript文件，21个SVG文件，15个Vue文件。该系统旨在提供一个便捷的Element UI表单设计及代码生成解决方案，使用户能够快速...
使用element-ui +Vue 解决 table 里包含表单验证的问题
09-16
本文将详细介绍如何使用Element-UI和Vue.js来解决在表格中包含表单验证的问题。 首先，我们需要理解Element-UI的表单验证机制。`el-form`组件是表单的基础，它通过`:model`属性绑定数据模型，并通过`:rules`属性...
Element-UI form表单 resetFields() 重置表单无效问题
weixin_58833137的博客
12-05 2756
Element-UI form表单 resetFields() 重置表单无效问题
解决 element-ui 表单清空的问题：先编辑后新增 resetFields() 无效
来杯卡布奇诺的博客
12-07 2596
首先需要注意几个问题：1、页面有个新增和编辑共用的弹出框，在页面初始化后先点新增，后编辑，可以重置 form。 2、先编辑，后新增使用 resetFields() 表单数据没有清空。1、当我们先新增再编辑，初始值是空的，调用 resetFields() 方法自然正常。 2、当我们先编辑再新增，会对表单赋值，初始值就是我们赋的值，调用 resetFields() 方法，表单里还有之前赋的值，并不是我们希望得到的清空表单。在编辑时，弹出框中的表单我们先让他初始化结束再赋值，使用 $nextTick 执行赋值。代
Element UI表单重置resetFields()方法不生效
weixin_43181470的博客
08-10 339
在写表格的搜索表单时，需要一个重置的按钮进行重置操作，写完之后发现没有什么效果。通过检查之后发现是因为，自己少写了el-form-item 上的prop属性所导致的，不加prop属性是没有效果的，也不要忘记写 ref 属性。...
element-ui 表单重置 resetFields 方法不起作用的解决方法
weixin_43299180的博客
03-19 5314
问题描述： 经常有新增和编辑需要复用同一个弹窗的情况；刷新一下页面，先点开编辑关闭弹窗后再点击新增，这个时候再弹窗关闭的时候重置表单方法没有效果： this.$refs.form.resetFields(); resetFields作用： 1、对整个表单进行重置，字段重置为初始值 2、移除校验结果 问题分析结果： 1、resetFields 重置的是初始值 2、form 的初始值在 mounted 生命周期执行的时候被调用 3、如果在 mounted 生命周期执行之前修改了初始值，那么resetFi
vue3+element-plus解决resetFields表单重置无效问题
唐唐唐行的博客
09-29 4955
vue3+element-plus解决resetFields表单重置无效问题
Vue Element Form表单 resetFields重置无效
ZeroKoop
07-10 808
原因有两点： el-form 标签需要绑定 ref 和 :model 属性 el-form-item 标签要绑定 prop 属性
element中重置表单
dongwang的博客
05-15 877
记得要有prop属性
使用elementui的表单重置按钮不生效
sunlizhen的专栏
12-10 1355
<el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline"> <el-form-item label="时间范围" prop="value1"> <el-date-picker v-model="formInline.value1"...
vue+elementui 表单重置不起作用问题
weixin_43173924的博客
03-27 3900
1.给el-form加ref <el-form:model="formData"ref="formData"> 2.每项加prop,名称和v-model一致 <el-form-itemlabel="检查项"prop="checkVal"> <el-inputv-model="formData.checkVal"style="width...
vue element-ui form表单重置 快捷方法
热门推荐
hlvy
08-24 5万+
点重置快速清空的方法 &lt;el-form status-icon :rules="rules" :model="ruleForm" ref="ruleForm" :label-position="labelPosition" label-width="100px"&gt; &lt;titleInfo&gt;
element ui重置表单不能全部清空
07-09
对于Element UI，重置表单时默认情况下是无法清空表单的。这是因为Element UI的表单组件会维护一个内部的表单数据对象，重置表单只会将该对象的值恢复为初始状态，而不会清空表单的输入值。 如果你需要在重置表单时...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值