Element UI 中清除初始化数据为空时this.$refs[formName].resetFields()不起作用

最新推荐文章于 2024-08-09 09:44:02 发布
最新推荐文章于 2024-08-09 09:44:02 发布
阅读量3.8w 收藏 10
点赞数 6
文章标签： vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010622874/article/details/80841315
版权

问题

在查询条件中，初始化时绑定手机号码值从cookie中获取，但是在清除表单的时候，只用this.KaTeX parse error: Expected 'EOF', got '#' at position 41: …s()无法清楚所有表单为空。 #̲分析原因 this.refs[formName].resetFields()只是将查询条件初始化，所以在初始化时绑定什么值就还是什么值。
如果想要清空指定的已绑定数据的表单元素，需要将清空的语句写在this.$refs[formName].resetFields()之后。

#记录一下element-ui vue中的坑

丹哥不是哥
关注
专栏目录
Element UI resetFields与clearValidate方法
日常笔记/总结/系列知识梳理
05-18 7万+
表单代码 <Form :label-width="120" :rules="formRules" :model="form" ref="form"> &am
Element-UI组件中Form表单resetFields()重置方法踩过的坑以及Vue中Axios同步异步请求踩过的坑，分享给大家！
Dream_xiaojin的博客
09-24 1万+
关于Form表单中restFields()方法的官方解释 restFields()方法说明：对整个表单进行重置，将所有字段值重置为初始值并移除校验结果。 根据字面意思理解，调用这个方法会将表单所填写的数据重置为初始值并且移除表单校验的结果。 我最开始所理解的“初始化数据”是指的实例化Vue时在data中所声明的数据。如下图所示： 也就是说，调用restFields()会将数据充值为这里所声明的初...
ui表单 vue 重置element_(vue.js)element ui 表单重置 this.$refs[formName].resetFields()不执行...
weixin_34129429的博客
02-04 463
我在一个弹框里有一个form表单，用于增加页面内容。点击取消按钮本身form里的内容都清空才对。使用了this.$refs['addServiceForm'].resetFields()不起作用。console出来console.log(this.$refs['addServiceForm'].resetFields());居然是undefined。title="新建服务":visible.syn...
this.$refs[formName].resetFields()不起作用、ElementUI表单重置不起作用
Liux- 的博客
03-22 1656
elementui新增和修改用同一个弹窗，resetFields不起作用
Element UI 表单 resetFields()，重置失效原因及解决方法
最新发布
m0_57454691的博客
08-09 453
this.$refs.ruleForm.resetFields() 是将form表单重置到初始值，并不会清空表单。解决办法：添加 this.ruleForm = this.$options.data().ruleForm。
this.$refs[‘form‘].resetFields()方法重置表单无效的坑
学无止步的博客
09-28 1万+
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里 this.$refs[formName].resetFields()；不完全生效的原因
一枚正在学习的渣渣
04-28 405
最初只添加了plantName的校验规则，没有写橙色框里的代码，但plantInfo的数据就不会被重置，添上之后功能完全生效。restfilds的格式定义： this.$refs[formName].resetFields();我要实现的功能是点击取消或叉掉对话框后重置表单。
关于this.$refs[name].resetFields();
weixin_43331469的博客
12-26 1万+
1.Form必须要有ref属性 2.Form必须绑定：model <Form ref="submitUser" :model="submitUser"> </FormItem> 3.Form的FormItem中必须要有pr
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
在使用Element-UI框架开发前端应用时，遇到的一个常见问题是关于`el-dialog`对话框的初始化校验问题。`el-dialog`是Element-UI提供的一个模态对话框组件，它通常与`el-form`结合使用，用于数据输入和验证。然而，当...
浅谈vue中resetFields()使用注意事项
11-19
3. 如果在打开弹框时需要初始化表单数据，应在`$nextTick`中进行，确保数据的初始状态正确。 了解这些细节可以帮助开发者避免在使用`resetFields()`时遇到的困扰，确保表单管理的正确性和一致性。在实际开发中，...
vue使用element-ui动态生成表单高可复用性解决resetFields()带来的问题
不叫浮云的博客
02-10 1485
因为每次写表单都要重新写一遍，感觉很麻烦。所以写了这篇自己封装了一个可重用的动态生成表单一个表单即可实现添加，修改功能。本文章将讲解一个很简单的方法来动态生成表单 (非表单项加减) ，封装实现一个高可用性的表单，同时讲解resetFields()带来的某些问题。 先上效果图 下图是element-ui官方的例子 官方的写法不能重用，一个新的表单都要重写一遍不够便利。所以我自己做了一个采用v-fo...
解决 Element-ui中 对话框 （Dialog）中含子组件时，使用 refs 调用该子组件为 undefined 的问题
明天也要努力的博客
11-11 1854
问题： 当对话框 （Dialog）中包含子组件时，我们使用 this.$refs 试图获取该组件的 dom 并操作时，发现获取的 dom 为 undefined 导致后续的方法报错； <template> <div> <el-dialog :visible.sync="propertyDialog" width="60%" center> <lineChart ref="chart" :xAxisArr="xA
elementUi中的级联选择器的清空操作
yinge0508的博客
03-04 5107
<el-cascader collapse-tags style="width: 100%" v-model="subjectValue" :options="subject" :props="{ multiple: isMultiple }" ref="cascader" clearable ></el-cascader> // 清空已经选中的数据方法 clear() { .
Element ui 重置表单resetField（）方法不生效
m0_60714745的博客
07-11 1425
场景：比如我们需要做一个新增和修改的弹窗，相信各位前端大佬们肯定会把这个弹窗抽出做成一个公共组件，再去写对应功能的时候就会方便许多，但是当我们做成公共组件后，点击编辑，好的没问题，点击新增，诶这个内容是什么情况，这不是上次点击的出现的数据吗？喔 天哪，新增的表单里怎么也被提交了，相信大家与遇见这个问题以后肯定会想，在新增的时候给他清空表单就完美解决了，但是当我们去调用resetFields（）方法的时候会发现没有作用，检测了一下代码跟上面没用弹窗的时候一样的啊，为什么没有生效呢？
element-ui中表单的重置功能不起作用！
EasyChillの博客
09-20 987
使用this.$refs[formName].resetFields();不生效 解决： 注意框柱的两点， 1、方法中的名字是和ref相关的（因为你使用的是this.$refs，如下图） 2、在form的每个item加prop属性，
element-ui中获取el-divider的组件的ref时为空
qq_42372534的博客
11-06 1049
【代码】element-ui中获取el-divider的组件的ref时为空。
element resetFields未生效解决
u013675978的博客
10-30 1万+
resetFields真的是个难搞的方法之前遇到过resetFields方法浏览器报undefind上一篇文章已经解决 现在出现resetFields没有起到重置form表单初始数据作用但是可以重置表单校验数据  遇到问题代码问题：先调用编辑回显再调用新增resetFields没有起到重置表单初始数据作用 data() { return { ...
iview、element-ui中resetFields重置表单
weixin_42869548的博客
08-03 9352
iview、element-ui中resetFields重置表单 今天在使用iview时，使用 this.$refs[formName].resetFields(); 这个方法是并不起作用，查阅了源码后发现， 内容必须要在每个form-item里加上prop属性，并且与你v-model的值相同才可以 例如 html &amp;lt;Form ref=&quot;formCusto...
[原创] vue中的this.refs为空出现原因分析
热门推荐
大象的博客
06-08 3万+
场景：在使用vue过程中，本想调用子组件的数据，但尝试多次一直获取失败。经过分析有以下原因： 1，在生命周期mounted之前的钩子函数中去调用会获取不到，原因是DOM节点都没有生成。 2 ，this.refs的组件在v-if为false的父节点下，导致这个子组件未渲染，所以获取不到。 总结:一定是组件已经渲染成功才能调用组件的数据。而不是页面加载完成后就一定能获取到...
this.$refs.formName.resetFields();报错
05-23
这个报错可能是因为你在调用resetFields()方法的时候，找不到formName这个表单组件的引用。 请确保在你的代码中，有一个名为formName的表单组件，并且在该组件上添加了ref="formName"属性。 如果你已经添加了ref...
评论 13
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值