elmetui在关闭弹窗 使用 this.$refs[‘elForm‘].resetFields()方法重置表单不生效的原因及解决方法

最新推荐文章于 2024-03-04 22:34:18 发布
最新推荐文章于 2024-03-04 22:34:18 发布
阅读量586 收藏 4
点赞数 1
文章标签： 前端 elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yhlhn/article/details/131384021
版权

**问题描述：**

先调用编辑回显再调用新增 this.$ref['form'] .resetFields()无法重置表单项

原因：

element-ui的官方文档：调用编辑的时候，表单的初始值被设置为回显的值，每次重置时只是重置为初始值，不是空值。

 

当我们第一次打开Dialog，紧接着设置回显，因为Dialog还没执行完毕，这时form的初始值会被设置为回显的值，所以在调用this.$ref['form'] .resetFields()时form看起来没有重置。

解决方法：

在设置回显值的时候，不要直接赋值，在外边加上setTimeout或者this.$nextTick

 

其他原因：

1.表单上没有添加ref属性

解决：在form上添加ref，需要与this.$ref['form'] 中名称一致

2.el-form-item没有添加prop属性

解决：prop属性需要与data绑定的属性一致

Yhlhn
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
elemenui el-dialog中el-form表单的resetFields失效问题
qq_39540108的博客
07-07 877
elemenui el-dialog中el-form表单的resetFields失效问题
使用elementui的表单重置按钮不生效
sunlizhen的专栏
12-10 1353
<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"...
this.$refs[‘form‘].resetFields()方法重置表单无效的坑
m0_67391870的博客
03-05 1149
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
解决elementUI表单重置不生效
最新发布
AGLQYP的博客
03-04 535
2 为了重置表单需要添加 ref 属性，ref属性需要与$ref['form']中名称一致。1 el-form-item添加。
关于element-ui中表单重置不生效的原因，及解决方法
weixin_65565362的博客
06-30 3598
resetFields这个方法是将表单重置为初始值， 也就是说，是将表单中的数据重置为dom节点渲染时的值，而不是重置为空对象。也就是说，当你的表单数据，是在dom节点渲染前被赋值的，那么他的初始值就不为空了。解决方法：给表单对象赋值，应在dom节点渲染完成之后，使用$nextTick这个方法$nextTick:将vuedom节点更新变为同步 使用resetFields的注意事项：设置prop属性，该属性值要与model值相同，如果不设置这个属性，resetFields是不生效的...
elementUI model弹框中 this.$refs[formEl].resetFields()不起作用
tian6632的博客
02-24 492
【代码】elementUI model弹框中 this.$refs[formEl].resetFields()不起作用。
ElementUI form表单在dialog中使用，先点击编辑后再点击新增，表单重置无效
weixin_44269229的博客
10-09 1290
在用ElementUI做动态表单时，数据的修改都是打开dialog（子组件）中进行操作的，但是在修改数据时，正常来说可以直接调用 this.$refs[str].resetFields() 直接清空，但是这里会出现一个问题: form表单的重置是以第一次打开的数据作为重置标准,如果先打开的是更新,那么重置之后以第一次更新的数据作为标准; Dialog 中的内容是懒加载的，目前 edit (更新)方法的写法导致 Form 刚加载出来时值就已经是新的了，所以 resetFields 也只能回到新值 解决办
Vue 解决通过this.$refs来获取DOM或者组件报错问题
10-15
主要介绍了Vue 解决通过this.$refs来获取DOM或者组件报错问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue列表单项展开收缩功能之this.$refs的详解
10-17
主要介绍了vue列表单项展开收缩功能之this.$refs的详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue 报错TypeError: this.$set is not a function 的解决方法
10-17
主要介绍了Vue 报错TypeError: this.$set is not a function 的解决方法，分享给大家，需要的朋友们下面随着小编来一起学习学习吧
vue+element-ui this.$refs[‘‘].resetFields() 重置表单数据不生效问题
yuxiangmitu的博客
07-20 9462
element 的 Form 组件提供了表单验证的功能，需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名。 有两点注意事项: 1.要有对应的 ref，且名字一致，表明重置哪个表单。 2.prop 设置的字段名要和 v-model 绑定的字段名一致，否则重置表单或进行自定义校验规则时不会生效。 仅使用重置功能时具体校验规则不必填，但要重置的字段一定要有对应的 prop。 ...
resetFields 不生效
m0_49494051的博客
01-22 913
el-form要设置ref属性，且ref的值与this.$refs[form].resetFields()中的form一致 el-form-item要设置prop属性，表单rule验证和resetFields()清除的都是prop绑定的字段 还有就是！！！注意大小写问题！:model=“ruleForm” 和 ref=“ruleForm” 大小写必须一致！ <el-form ref="userForm" :rules="userRules" :model="userForm" label-wid
elment ui 之 表单 form 表单 的重置 this.$refs[formName].resetFields() 不生效
YZRHANYU的博客
12-09 856
elment ui 之 表单 form 表单 的重置 this.$refs[formName].resetFields() 不生效
ElementUI`resetFields()`方法避坑
热爱编程、热爱生活、热爱探索
02-17 1157
本文主要记录在使用ElementUI中`resetFields()`方法时的一些坑，以及记录如果避坑，如果您在使用它时，遇到了其它坑，欢迎留言，让我们一起来填坑吧😄
elementUI 表单数据的校验回显在关闭之后没有重置，再次打开表单之后还显示校验信息（重置表单 element-ui的resetFields()方法不生效）
youyantan的博客
08-02 2551
elementUi重置表单
this.$refs的使用
refaker的博客
04-26 4185
ref写在标签上时，this.$refs.名字 获取标签对应dom的元素 <div ref='hello' @click="handle()"> login </div> //获取对应dom元素 //methods:{ // handle(){ // console.log(this.$refs.hello.innerHTML) // } //} 这个例子获取的是el-form标签对应的元素 ref写在组件上时，获取到的是子组件的引用
【收藏】Vue+elementUI的this.$refs.对象名.方法名的理解
学亮编程手记
07-25 1847
以前根本看不懂这么写是什么意思： this.$refs.tree.getCheckedKeys()); 其实上面的方法就是已经封装好的，直接调用即可，this,代表在当前vue里，$refs代表一个引用（可以把它近似看成一个包名，）然后tree就是我们的el-tree的ref,可以理解为是该控件的一个对象，然后我们可以通过对象调用方法。但是如果按照案例一那样写就不对了 即： <el-tree ref="tree" ...
ElementUI里 this.$refs[formName].resetFields()；不完全生效的原因
一枚正在学习的渣渣
04-28 332
最初只添加了plantName的校验规则，没有写橙色框里的代码，但plantInfo的数据就不会被重置，添上之后功能完全生效。restfilds的格式定义： this.$refs[formName].resetFields();我要实现的功能是点击取消或叉掉对话框后重置表单。
this.$refs.myForm.resetFields();重置表单失败原因
06-14
表单重置失败可能有以下几种原因： 1. 没有正确设置表单的 `ref` 属性。在表单组件中必须设置 `ref` 属性，例如：`<el-form ref="myForm">...</el-form>`。如果没有设置 `ref` 属性，那么在调用 `$refs` 时就会返回 `undefined`，导致重置表单失败。 2. 表单组件中存在非绑定值的字段。如果表单组件中存在一些没有使用 `v-model` 或 `:model` 绑定值的字段，那么在调用 `resetFields()` 方法时，这些字段的值并不会被重置。因此，建议对所有表单字段都进行数据绑定，这样才能确保表单重置成功。 3. 表单组件中存在自定义组件。如果表单组件中包含自定义组件，那么这些组件可能没有正确实现 `resetFields()` 方法，导致表单重置失败。在这种情况下，需要在自定义组件中手动实现 `resetFields()` 方法来支持表单重置。 4. 表单组件中存在异步操作。如果在表单组件中存在异步操作，例如异步验证，那么在调用 `resetFields()` 方法时，这些异步操作可能还没有完成，导致表单重置失败。在这种情况下，需要确保所有异步操作已经完成后再调用 `resetFields()` 方法。可以使用 Promise 或 async/await 等方式来处理异步操作。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值