elment组件库，编辑关闭后，新增时又回显数据的问题

最新推荐文章于 2024-10-17 10:19:26 发布
最新推荐文章于 2024-10-17 10:19:26 发布
阅读量526 收藏 9
点赞数 10
CC 4.0 BY-SA版权
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/chihirov/article/details/139433663

这边文章主要说一下我遇到的问题

如图，新增的时候，把编辑过的数据回显了，造成的原因是什么呢? 我明明在关闭弹窗的时候写了resetFields()

可还是出了问题。

我去官网Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库icon-default.png?t=N7T8https://element.eleme.cn/#/zh-CN/component/form看了下resetFields是干嘛的 

这里说它是重置表单，然后我就在想重置并不是清空吧。看了一眼编辑打开的时候，我给表单传了默认值，原来是重置表单的时候，把编辑传进去的默认值，填充进去了。

-------------------------------------------------------------  手动分割

解决办法：

在关闭的时候把，form={}即可

需要注意，如果form中存在数组或其他复杂类型的数据，需要更换成自己需要的初始值

chihirov
关注
vue3 - element-plus组件库el-cascader级联选择器，“动态数据懒加载+回显/编辑时自动选中对应节点“ 问题，多选复选框、单选框级联选择器如何让数据回显？数据是动态加载回显咋办
高级前端工程师
06-28 1万+
elementPlus，vue3，element plus el-cascader 回显，级联选择器，回显，懒加载，el-cascader 动态加载选项、编辑时数据回显问题 、单选不加载下一级节点，级联选择器动态懒加载以及回显，解决el-cascader回显失败问题，三级联动数据回显，省市区回显，el-cascader 动态加载，编辑时数据回显，Element-plus Cascader级联选择器动态加载模式下数据回显时的问题，el-cascader列表是动态的怎么回显，赋值后，不回显怎么办，数据还没加载怎
vue3 - 实现element plus表格组件table动态添加或删除行功能，表格列表动态新增插入/删除表格行，可编辑单元格/点击修改表格内数据并更新数据列表（可接口懒加载、表格分页、复杂嵌套表格
高级前端工程师
12-22 7178
vue3，element-plus，表格Table组件，el-table，动态表格，实现表格动态增加/删除/编辑表格行，带有校验规则，自定义表格增删改查，动态表格动态数据新增修改删除，vue3+Element Plus动态生成表格，并实现内容可编辑，如何实现表格动态增加/删除/编辑表格行(带校验规则)，数据有分页，懒加载如何更新，嵌套带下级的表格如何更新，不调用api接口怎么更新数据，示例代码，表格可编辑单元格自定义数据化结构新增删除取消，动态数据表格，表格动态添加或删除行，查询重置新增编辑回显删除，行内编
解决elementUI中el-form、el-dialog、数据回显同时用时，有bug
阿超的博客
10-29 4730
第一次打开网页，先点击修改，再点击新增，发现输入框竟然有值， 点击修改后，关闭对话框的时候，置空失效了
解决elmentui编辑后点击新增数据未清空问题
weixin_43443325的博客
06-08 426
zhuanhttps://www.jianshu.com/p/5f8faf48b1ab
VUE 表单点击编辑，再点击添加，数据无法清空问题（新增和修改用一个弹窗）
前路漫漫，少年，继续披荆斩棘！
02-22 1068
VUE 表单点击编辑，再点击添加，数据无法清空问题（新增和修改用一个弹窗）
vue+ts+elementPlus 解决清空数据关闭弹窗，再次打开的时候数据未清空
qq_62442040的博客
08-29 764
的值时，Vue 会销毁旧的组件实例并创建一个新的组件实例，这就等同于“重置”了组件的状态。发生变化，进而销毁并重新创建这个组件，确保组件的所有状态（如上传的文件）都被清空。都会返回一个当前的时间戳，这个值是唯一的，因此可以确保每次更新。的调用简洁、无副作用，适合用来生成需要频繁更新的唯一值。是一个 Vue 组件，它在重新渲染时会根据。属性来判断是否需要重建组件实例。改变时，Vue 会检测到。
element重置表单，解决页面第二次打开数据还在的问题
小超人日常码字
09-22 1595
重置表单 可解决表单数据缓存的情况，每次打开dialog或者切页面时候，先清空表单和验证，保证每次表单都是干净的 // formName为表单的ref值 this.$nextTick(()=>{ this.$refs[formName].resetFields(); })
Vue+elementUI实现多图片上传与回显功能（含回显后继续上传或删除）
11-21
Vue.js 是一款流行的前端框架，而 Element UI 是基于 Vue 的一套组件库，提供了丰富的 UI 组件，方便开发者快速构建界面。在本项目中，我们利用 Vue 和 Element UI 实现了一个多图片上传的功能，并且包含了图片回显...
使用element 自定义上传组件（http-request属性）时界面抖动 （重复显示新增动画 回显）
XZH1730932805的博客
04-16 2792
自定义显示遇到显示完成新增动画，上传完成之后又重复显示新增动画的问题 参考博客以及element-ui组件el-upload自定义上传时界面抖动 问题1：使用 http-request 不能触发 on-success 函数。 　　原因： 　　使用 http-request 时，需要返回 promise 对象，才会触发 on-success。 解决方法： 　　将 ttp-request 函数结果返回 promise 对象即可。 问题2： 上传抖动问题 原因： 一般使用自...
Element-ui el-tree新增和删除节点后如何刷新tree的实例
01-21
一, 当新增节点后刷新当前节点 node.loaded = false; node.expand(); //新建子节点是刷新一次本节点的展开请求，而重命名和删除则需要刷新父级节点的的展开事件， 二, 删除节点 node.parent.loaded = false ...
elementUI+vue使用el-dialog弹窗，关闭时表单数据清不掉
m0_58360569的博客
07-11 3400
解决elementUI关闭后清除页面缓存数据
resetfields 无法清空 初始值
flyover2017的博客
09-03 5483
问题描述 使用element UI弹窗编辑表单后，点击关闭弹窗调用resetFields()方法重置表单初始值； 然后打开新增表单，发现表单回显了上次编辑的值，也就是resetFields()重置表单失效。 解决方法 this.$nextTick(() => { // 这里开始赋值，例如this.form.xxx = xxx; }) 原因分析 编辑表单时，第一次打开dialog的时候因为要回显数据，所以给表单绑定的model赋值了，这时候这个model的初...
vue element ui 动态表单的上传后的回显以及操作
weixin_42396196的博客
04-27 3103
//首先拿到获取回来的数据 let arr = this.$refs.AddRule.FormObj.content.split(","); //每次重置 this.$refs.AddRule.FormObj.domains = []; //循环数据 for (let i = 0; i < arr.length; i++)...
element表单el-form的resetFields四种失效情况的解决方法汇总
Yunwushenyanying的博客
10-26 5772
本文汇总了el-form的resetFields方法失效的四种常见情景及其解决方法。
el-form内容重置（解决点击保存关闭后再点击新增会有编辑携带的数据的问题）
leng0920的博客
09-05 965
el-form内容重置（解决点击保存关闭后再点击新增会有编辑携带的数据的问题）
element的resetFields重置失败，在编辑后，再次点击新增弹框回显了修改行的数据
m0_58185022的博客
04-12 313
使用this.$refs.form.resetFields进行表单重置，操作第一次点击弹框为新增状态时，表单重置成功，第一次点击弹框为编辑状态时，再次点击新增，会回显第一次点击修改时的表单的值，表单重置失败，很显然，重置效果是生效的，当第一次点击弹框的状态为编辑时，已经给form表单填上了数据，重置表单读取的是表单第一次渲染完成时form的值，那么表单渲染完成前，将这个form表单值置空就行了。
记录使用el-form的resetFields时遇到的表单数据回显失败的问题，去除nextTick解决
m0_73761441的博客
07-25 782
记录使用el-form的resetFields时遇到的表单数据回显失败的问题，去除nextTick解决
关于Ant Design of Vue中form表单编辑或新增后再次点击编辑或新增依然出现上一条数据问题
amy_victory的博客
01-13 4253
在使用Ant Design of Vue这个框架时，界面创建新增和编辑时，出现一个问题，就是新增信息保存后再新增一条信息发现上一条新增的记录还在form表单里并没有清除，不管怎么去清除数据依旧出现这个问题，还有编辑的时候也同样出现这个问题，编辑完一条信息后还编辑后者新增第二条信息依然出现的是上一条信息的数据在form里面，所以一定要仔细阅读官网文档，不然就容易踩了这个坑。其实这个问题不难解决。官网文档已经写好方法了 resetFields 重置一组输入控件的值（为 initialValue）与状态，
elementui 的 table 组件回显已选数据时候使用toggleRowSelection 方法的坑点
qq_57952018的博客
10-17 844
elementui 的 table 组件回显问题。
动态表格的数据回显，新增，删除，使用th
最新发布
04-04
嗯，用户问的是关于动态表格的数据回显、新增、删除，以及使用th的问题。首先，我需要明确用户的具体需求。动态表格通常出现在前端开发中，可能是在使用Vue、React或者Angular这样的框架。而“th”可能指的是HTML中...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值