elementUI中resetFields的坑

最新推荐文章于 2024-09-30 13:43:17 发布
最新推荐文章于 2024-09-30 13:43:17 发布
阅读量2k 收藏 1
点赞数
分类专栏： 2019
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39957042/article/details/102705972
版权 
self.$refs['dataForm'].resetFields();

这个方法可以重置表单的元素，但是是有条件的，它只能重置表单中带有prop属性的元素
例如：

<el-form-item :label="$t('sim.validDay')" prop="validDay">
                <el-input-number v-model="dataForm.validDay" :precision="0" :min="1" :max="999" :disabled="statusDis1"></el-input-number>
 </el-form-item>
狮子狗的自我修养
关注
专栏目录
Element-UI组件中Form表单resetFields()重置方法踩过的坑以及Vue中Axios同步异步请求踩过的坑，分享给大家！
Dream_xiaojin的博客
09-24 1万+
关于Form表单中restFields()方法的官方解释 restFields()方法说明：对整个表单进行重置，将所有字段值重置为初始值并移除校验结果。 根据字面意思理解，调用这个方法会将表单所填写的数据重置为初始值并且移除表单校验的结果。 我最开始所理解的“初始化数据”是指的实例化Vue时在data中所声明的数据。如下图所示： 也就是说，调用restFields()会将数据充值为这里所声明的初...
vue使用element-ui动态生成表单高可复用性解决resetFields()带来的问题
不叫浮云的博客
02-10 1509
因为每次写表单都要重新写一遍，感觉很麻烦。所以写了这篇自己封装了一个可重用的动态生成表单一个表单即可实现添加，修改功能。本文章将讲解一个很简单的方法来动态生成表单 (非表单项加减) ，封装实现一个高可用性的表单，同时讲解resetFields()带来的某些问题。 先上效果图 下图是element-ui官方的例子 官方的写法不能重用，一个新的表单都要重写一遍不够便利。所以我自己做了一个采用v-fo...
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
10-14
主要介绍了快速解决Vue、element-ui的resetFields()方法重置表单无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
前端--element-plus表单重置校验resetFields失效-问题记录
最新发布
qq_61570366的博客
09-30 327
问题描述：新增和修改对应的数据字段一般来说基本相同，我项目中对于某一模块功能的新增和修改数据使用了同一个dialog，打开组件页面后，先点击新增再点击编辑，表单内容可以重置，但似乎先点击编辑再点击新增，新增对话框中的表单数据没有被重置。，而form表单初始值在对dialog弹出之后被渲染，因此每一次重置都是重置为dialog第一次渲染时form的值。解决：再点击编辑按钮弹出对话框之前，使用Vue实例自带的nextTick()方法对form初始值进行赋值。
elementUI的resetFields() 方法不好用
小耳朵晨晨
01-13 482
有可能是因为没写prop <el-form :inline="true" ref="queryParam"> <el-form-item label="创建时间" prop="date"> {{date}} </el-form-item> <el-button size="mini" @click="...
ElementUI中的resetFields方法
weixin_44689966的博客
05-11 5601
需求 点击按钮弹出修改的对话框 出现的bug 在点开一个按钮之后，不做操作，关闭对话框，再点开另一个按钮，发现这一行的数据被改变了 具体如下 造成的原因 原因一：我在给弹出的对话框中赋值时，是浅拷贝，导致对话框中的数据源与table中的数据源是同一个数据源，修改对话框中的数据就是修改table中的数据 原因二：resetFields仅仅是将字段重置为初始值，并不是将数据清除。上图中第一次绑定的数据是1，所以表单的初始数据就是1，在第二次点击又关闭时，会触发resetFields方法，将对话框中的数据重置为
el-element表单el-form使用resetFields清空进行初始化
migexiaoliang的博客
12-07 2949
el-element表单el-form使用resetFields清空进行初始化 我们一般使用带表单的弹窗时，有时候新建完成再次打开或者填写完数据不保存去关闭表单，再次打开会保留之前的填写。 想要点击取消按钮、点击关闭按钮清空数据，可以使用element的 1、el-form 里 加上 ref=‘form’；2、表单项 加上 prop=“name”；3、this.$refs[‘form’].resetFields() // 清空表单
关于vue element-ui form表单重置时遇到的问题 resetFields方法提前执行
m0_72663698的博客
03-29 847
但我使用过这个方法后发现这个方法在我子传父this.$emit操作之前就执行了，这个方法提前把握的表单数据给清空了，导致我的表单数据被清空从而没有传到父组件 ，于是我在网上查阅大量相关文章，也没找到相关的资料，只发现这个问题的出现是执行顺序导致的问题，在下面加了this.$nextTick方法可以暂时解决这个问题，但是感觉并不规范，后来我又找到了一个方法。在做表单提交的时候遇到了个奇怪的问题，我提交表单要把表单的数据传递给父组件，在提交过后有一个重置表单的操作，以下是我一开始用的清空表单的方法。
elementui table实现动态将列固定到左侧(fixed)
万万没想到的博客
10-28 1万+
前言 这个功能是是在elementui表格的列拖拽及动态显示列实现基础上进行的功能增强 在开始之前请自行查询v-contextmenu 组件的安装以及全局引用 注：后端开发前端实现并不规范，主要讲个思路，代码优化看你了（如果有可以私信或者评论告诉我，跪谢） ...
如何基于elementui table实现自己的表格组件
万万没想到的博客
10-29 1135
前两篇博客已经讲过如何实现，这里我把功能抽成了一个组件，这样如果有多个需要该功能的表格就可以复用了： 首先先是组件的代码： <template> <el-table v-loading="listLoading" :data="tableData" border fit ...
vue element ＜el-dialog＞ 标签 内表单验证坑记录
小学僧的学习笔记
05-08 1145
发生情况：在dialog中写表单验证，dialog框关闭后表单验证还存在 解决： 关闭时直接销毁dialog v-if
Element Plus表单调用resetFields方法失效解决方案，论nextTick函数的重要性！
weixin_45254062的博客
12-21 1069
场景复现 在我们日常 Vue3 开发当中，总是会离不开 Element UI 组件库，组件库中还是得属表单和表格的使用频率最高。比如，后台管理系统中，会大量地使用表格和表单。而且，我们通常都会在开发 CRUD 接口的时候复用同一个表单和对话框来实现查看详情、新增数据、修改数据的效果，这样可以大大减少冗余视图结构代码，提高代码复用性。 具体一点讲，在点击新增按钮的时候，会弹出对话框显示添加数...
解决Vue中Element resetFields()重置表单不生效的问题（含Cannot read property ‘resetFields‘ of undefined问题解决）
unlilalila的博客
11-25 2万+
解决Vue中Element resetFields()重置表单不生效的问题， 解决Cannot read property ‘resetFields‘ of undefined问题
重置element-plus表单 Vue3
tida_yake的博客
12-11 2914
重置表单 element-plus
this.$refs 获取不到解决办法
热门推荐
poppymilan的博客
09-07 4万+
问题描述 页面一进来初始化之后，需要通过获取this.$refs 调用子组件中的某个方法，但是获取不到，返回undefind 解决过程： 楼主查询了原因，是这样解释的： ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。 如果ref 是循环出来的，有多个重名，那么ref的值会是一个数组 ，此时要拿到单个的ref 只需要循环就可以了。 这里就涉及到VUE生命周期的
element-ui 表单重置 resetFields 方法不起作用的解决方法
weixin_43299180的博客
03-19 5423
问题描述： 经常有新增和编辑需要复用同一个弹窗的情况；刷新一下页面，先点开编辑关闭弹窗后再点击新增，这个时候再弹窗关闭的时候重置表单方法没有效果： this.$refs.form.resetFields(); resetFields作用： 1、对整个表单进行重置，字段重置为初始值 2、移除校验结果 问题分析结果： 1、resetFields 重置的是初始值 2、form 的初始值在 mounted 生命周期执行的时候被调用 3、如果在 mounted 生命周期执行之前修改了初始值，那么resetFi
解决 element-ui 表单清空的问题：先编辑后新增 resetFields() 无效
来杯卡布奇诺的博客
12-07 2724
首先需要注意几个问题：1、页面有个新增和编辑共用的弹出框，在页面初始化后先点新增，后编辑，可以重置 form。 2、先编辑，后新增使用 resetFields() 表单数据没有清空。1、当我们先新增再编辑，初始值是空的，调用 resetFields() 方法自然正常。 2、当我们先编辑再新增，会对表单赋值，初始值就是我们赋的值，调用 resetFields() 方法，表单里还有之前赋的值，并不是我们希望得到的清空表单。在编辑时，弹出框中的表单我们先让他初始化结束再赋值，使用 $nextTick 执行赋值。代
element plus resetFields
weixin_57166400的博客
12-31 978
我在开头已经说了表单重置方法的重置规则，如果你的表单是放在抽屉中，刚开始是不会被渲染的，当打开抽屉时才会被渲染，如果你是先点击的编辑打开的抽屉以及表单，那么表单的的初始值就是回显的那一个初始值，所以在后面你的其他按钮内用到了表单的重置方法后，重置后都是“那个带有数据的初始值”，如果你的表单是放在抽屉中，刚开始是不会被渲染的，当打开抽屉时才会被渲染，如果你是先点击的编辑打开的抽屉以及表单，那么表单的的初始值就是回显的那一个初始值。点击编辑后会打开抽屉，点击新增也会打开这个抽屉，编辑和新增共拥一份抽屉表单。
elementui中的坑
09-02
Element UI 是一个基于 Vue.js 的 UI 组件库，它提供了丰富的组件和样式，方便开发人员构建用户界面。尽管 Element UI 是一个很受欢迎的框架，但也不可避免地会有一些坑需要注意。 1. 版本兼容性问题：在使用 Element UI 时，要确保你的 Vue.js 版本与 Element UI 的版本兼容。不同版本之间可能会存在一些 API 不一致的问题，导致一些功能无法正常使用。 2. 样式冲突：Element UI 提供了一套默认的样式主题，如果你的项目中已经有自定义的样式或者使用了其他的样式库，可能会出现样式冲突的问题。这时可以通过修改 Element UI 的主题样式或者使用 scoped 样式来解决冲突。 3. 组件定制化：Element UI 提供了很多常用的组件，但是当你需要进行一些较为特殊的定制时，可能会遇到一些限制。这时可以通过修改组件源码或者使用插槽等方式来实现定制化需求。 4. 文档不完善：尽管 Element UI 的文档相对较详细，但仍然可能存在一些不完善或者错误的地方。在遇到问题时，你可能需要查阅一些社区的讨论或者尝试不同的方法来解决。 5. 性能问题：由于 Element UI 提供了大量的组件和功能，如果在大规模数据展示或者复杂交互的情况下使用，可能会导致页面性能下降。在使用时要注意优化，避免过多的渲染和不必要的重绘。 这些是一些常见的 Element UI 中的坑，希望对你有所帮助。如果你有具体的问题，可以提供更多细节，我会尽力回答。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值