Elementui在重置表单时，无法使用this.$refs[‘formRefVal‘].resetFields()清空表单数据；

已于 2022-03-02 17:46:43 修改
阅读量751 收藏
点赞数
文章标签： elementui html5 html
于 2021-09-04 19:31:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43846574/article/details/120104461
版权

问题

elementui在重置表单时，无法使用this.$refs[‘formRefVal’].resetFields()清空表单数据;**

原因

根据文档显示，resetFields是对整个表单进行重置，将所有字段值重置为空并移除校验结果。但是实际上resetFields是清空validateMessage，然后把值重置成了上一次初始化的值。

如果你编辑时，第一次打开dialog的时候给表单绑定的model赋值了，这时候这个model的初始值就变成了你所赋值的值，所以resetFields的时候，会将model对应的每个值重置到初始值，这时候的初始值就是你编辑时赋值的那个值。

解决办法：

form的每个item加prop属性，需要和绑定数据的最后名称一致
在这里插入图片描述
官方说明https://element.eleme.cn/#/zh-CN/component/form

Funchovy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
elementplus2. vue引用element-plus时清空表单的操作|重置表单|this.$refs[name].resetFields()；失效的做法
yangyangdt的博客
01-27 5359
vue引用element-plus时清空表单的操作|重置表单|this.$refs[name].resetFields()；失效怎么办？
TypeError: this.$refs.resetFields is not a function解决方法
yan的秘密基地
03-16 1万+
在使用element-ui进行vue项目开发过程中遇到TypeError: this.$refs.resetFields is not a function的报错，就像下面这样： 原因：在表单验证时关于重置按钮的.resetFields()方法使用过程中出错。 在找错之前先了解Form 组件提供的表单验证功能的用法 通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名 <!-- 输入框 --> <el-form class="log
Ant Design Vue 的 formRef.value.resetFields() 不生效
qwe122343的博客
03-18 4153
从 iView 转过来写 Ant Design Vue，还是有些不同的地方。比如在用 Form 表单时 发现清空表单功能竟然不好使了 <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol" ref="formRef"> <!--没加name不生效！！相当于iView中的prop--> <a-form-item label="节点名称"> <a-input v
报错： formRef.value.resetFields is not a function
qq_44792224的博客
04-23 3173
弹出这个错误大概是因为第一次点击弹框的时候弹框内本来就是初始值，并不需要 reset，所以可以在使用 resetFields 之前增加一个判断条件。// 添加按钮-打开。
element-ui 表单清空使用resetFields() 无效问题
weixin_48624392的博客
03-16 873
resetFields() 无效
el-form的重置表单（resetFields()）不生效的其他原因
最新发布
qq_40417349的博客
03-04 850
经过反复测试，还有一种情况也会导致resetFields失效，如下代码中，在el-form与el-col标签之间还添加了一个template标签，原本用于数据加载时不显示表单内容，但是，经过反复测试发现，它在这个位置会导致resetFields重置表单数据操作失效，具体原因还不清楚；将其删除之后，resetFields操作生效。近日我也遇到了el-form的重置表单（resetFields()）方法不生效的问题，网上查找了很多解答，反复检查我的写法实际上都是符合使用规则的，但是还是不生效，好生奇怪。
resetForm() { this.$refs.form.resetFields(); },
05-29
它的作用是重置表单数据，将表单中的所有输入框清空并还原为初始值。 具体来说，这个方法使用了 `$refs` 对象来获取组件中名为 `form` 的子组件，并调用其 `resetFields()` 方法，将表单中的所有输入框清空并还原为...
resetForm() { this.$refs.form.resetFields(); 解释这段代码
06-01
具体来说，`this.$refs.form` 是通过 `ref` 属性引用到组件中的 `<el-form>` 表单元素，`resetFields()` 方法是该表单元素上的一个内置方法，用于清空表单中的所有数据和验证状态。因此，当该方法被调用时，它会将...
Vue中重置表单失败resetFields
weixin_43330343的博客
12-15 1114
Vue中重置表单失败resetFieldsthis.$refs.表单名.resetFields()清空失败清空不成功的情况结果 this.$refs.表单名.resetFields()清空失败 表单样式: 使用Element-ui的表单重置时,用this.$refs.表单名.resetFields()可以实现清空,具体步骤如下: 1.在el-form的ref中设置引用名 <!-- 登录表单区域 --> <el-form ref="loginFormRef" :model="l
【记录】vue+element使用resetFields重置，保存表单会出现一闪而过上次赋的值
灵活的小胖砸
04-01 1172
resetFields作用实际上是将表单元素置为初始值 使用resetFields清空表单，有时候会出现再次打开表单，还是会出现上一次的值的情况 解决方案 1.在打开弹窗时，在$nextTick中赋值，因为此时Dialog已经初始化（已经mounted） confirmEdit(row) { console.log(row, '编辑') this.dialogVisible = true this.$nextTick(() => { this
vue3 antd项目实战——Form表单的重置【使用resetFields()重置form表单数据、清空输入框】
热门推荐
XSL_HR的博客
12-31 1万+
ant design vue组件库中的form表单有一个自带的重置函数——resetFields()。本期文章将借助resetFields函数，实现form表单的重置与清空。
Vue表单重置，条件清空。this.$refs[name].resetFields()；
天青色等烟雨
09-06 2414
Vue表单重置，条件清空。this.$refs[name].resetFields(); 需要注意的是在form表单中，要添加【prop】 代码如下 <template> <div> <Form ref="formItem" :model="formItem" :label-width="80" inline> <FormItem label="名称" prop
Vue Element表单验证成功后，清空表单
XXX51129的博客
04-26 1864
this.$refs.ruleForm.resetFields() 这是用来清空表单的代码，实际使用可以放在显示操作成功的代码下面，在接口调用成功后执行。 出处是：
关于resetFields重置表单至初始状态的问题
sinat_41200024的博客
01-31 4677
之前在项目遇到一个问题： 当我点击第一行数据的“修改”后会弹窗， 当我在弹窗中点“确定”按钮后，页面总是会闪现第一次点的那行数据，后来发现我是用了form表单中的resetFields这个方法， 当初用这个方法是想移除校验，但没注意到他会将其置为初始值。 后来取消使用这个方法，然后改成下面这个专门移除校验的方法就可以解决问题了，如下 ： 好了问题完美解决了，现在页面不再会闪现上一次出现...
this.$refs[‘form‘].resetFields()方法重置表单无效的坑
m0_67391870的博客
03-05 1216
this.$refs[‘form’].resetFields()方法重置表单无效的坑 1、用法不对 要想this.$refs[‘form’].resetFields()方法有效，必须配置el-form :model 属性和el-form-item中的prop属性，才可以。 注意：this.$refs[‘form’].resetFields()这个做法其实是重置表单到初始值，不是清空表单，当表单第一次在页面中渲染时所用的数据就是初始数据。 2、坑1 在还没有显示对话框之前就调用this.$refs[‘form
对表单里面的字段进行截取,删除form表单里面的某个字段属性
菜鸟黑一枚
01-03 4978
    ​ &lt;template&gt; &lt;div class="content-container"&gt; &lt;div class="content-operate"&gt; &lt;el-form :inline="true" class="search-form-inline" label-position="
vue3+element-plus 弹框表单重置(resetFields)失效、无效解决
我不是程序员的博客
10-13 5514
一个弹框同时实现新增、修改功能。点击修改时赋值到弹框里面的表单，点击新增弹框里面表单都是无值，表单修改再新增重置无效
vue + elementui表单重置 resetFields 问题 点击重置没有重置也没有报错问题
Z_Gleng的博客
02-09 873
问题： elementui在重置表单时，无法使用this.$refs[‘formRefVal’].resetFields()清空表单数据; 解决方法： 1、表单加ref属性 <el-form ref="refname"></el-form> 2、form的每个item加prop属性（这个是比较容易忘记的地方,需要和绑定数据的最后名称一致，prop属性添加到form-item上） <el-form-item prop="name"> &l
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值