解决 ElementUI form表单在dialog中重置表单,无法正确重置的问题

解决elementUI中el-form、el-dialog、数据回显同时用时,有bug 第一次打开网页,先点击修改,再点击新增,发现输入框竟然有值, 点击修改后,关闭对话框的时候,置空失效了 阅读详情

问题描述:

在用ElementUI做动态表单时,数据的修改都是打开dialog(子组件)中进行操作的,但是在修改数据时,正常来说可以直接调用 this.$refs[str].resetFields() 直接清空,但是这里会出现一个问题:

**form表单的重置是以第一次打开的数据作为重置标准,如果先打开的是更新,那么重置之后以第一次更新的数据作为标准;
Dialog 中的内容是懒加载的,目前 edit (更新)方法的写法导致 Form 刚加载出来时值就已经是新的了,所以 resetFields 也只能回到新值**

解决方案

  1. 利用v-if的特性,进行form的销毁和重建,强行让每一次改操作拿到的数据为父组件传过来的初始值。
  <el-dialog title="编辑" :visible.sync="isshow" left v-if='isshow'>
2. 用 nextTick 处理一下form的数据`这里写代码片`
this.$nextTick(() => {
          this.form.user_id = "111";
          ...
       });


在elementUI官方github上也有讨论,地址:https://github.com/ElemeFE/element/issues/3217

影刀初级考试操作题2 题型E主要考察了Excel的操作,总体上难度不大,流程也很少。有些细节地方比如是追加还是覆盖,多试几次就没问题了。 阅读详情

相关推荐

solidworks实体显示线框

solidworks实体莫名其妙显示为有点虚的线框

qq_35858902的博客 1万+

this.$refs[‘form‘].resetFields()方法重置表单无效的坑

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

m0_67391870的博客 1426

Deepseek:物理神经网络PINN入门教程

物理信息网络(Physics-Informed Neural Networks, PINN)是一种将物理定律(如偏微分方程、守恒定律等)嵌入神经网络训练过程的深度学习方法。其核心思想是通过神经网络同时拟合观测数据并满足物理约束,从而解决传统数值方法难以处理的高维、噪声数据或复杂边界条件问题。

金石软件 9299

解决 element-ui 中From 表单和Dialog 对话框搭配使用时 resetFields重置方法无法清空数据的问题

【代码】解决 element-ui 中From 表单和Dialog 对话框搭配使用时 resetFields重置方法无法清空数据的问题。

be_stuck_up的博客 2195

从Oracle迁移数据到Hadoop

目标:把Oracle 下的数据文件迁移到 Hadoop , 数据表都是上亿条,每个数据表的空间都超过100G。 关键是建立数据文件是UTF8格式,这样数据中的汉字在Hadoop 里显示才正常。 平台:CentOS 6.10 工具:Python 2.7 cx_Oracle 库 Oracle10.2.0.4.0 Hadoop 2.7.2-transwarp-5.2.1 1. 查看表...

预则立 4236

npm报错 npm WARN deprecated....的问题解决方式

报错 :npm WARN deprecated … 现象:无法进行有效的vue项目的部署以及npm install 命令的执行。 原因一:版本问题 说明:由于npm的版本过低或者过高导致的报错 检查版本: npm -v 如果版本是比较旧的,或者是最新的,这里可以进行对npm的更新和回退。 更新npm版本: npm updated -d 查看可以更新的版本 npm install -g npm 默认安装最新版本 安装回退指定的版本: npm updated -d 查看所有的版本 npm -g i.

任聪聪的博客 16万+

el-form组件使用resetFields重置失效问题解决,有效避坑

el-form组件使用resetFields重置失效问题解决,有效避坑

weixin_45755709的博客 5810

docker-compose Install OrangeHRM

OrangeHRM是一个全面的人力资源管理HRM) 系统,它包含任何企业所需的所有基本功能。OrangeHRM旨在支持任何规模的团队,包括初创企业、中小企业以及大型跨国组织。

极致,细节 1004

新手上路~VUE3+Element-PLUS dialog弹出框重置表单不生效问题

Element-plus dialog问题

Yjx的博客 2234

【前端圭臬】二:你知道的和不知道的 HTML

关于 HTML,说几个你可能不太关注的问题。

Evan 的博客 4758

MySQL——cost成本计算之MySQL如何选择使用索引(trace)

文章目录前言trace工具分析执行计划 前言 在之前博客中,根据测试案例,发现同样的sql语句,因为传入的条件值的不同,导致MySQL有时候选择使用索引,有时候又不适用索引。 如下所示sql的执行计划: EXPLAIN SELECT * FROM employees WHERE name > 'aaa'; EXPLAIN SELECT * FROM employees WHERE name > 'zzzz'; 在MySQL中,为什么会出现上述这种玄乎的现象呢? 本篇博客重点说明原因。 在说

专注写bug 679

ElementUI组件Dialog弹窗再次打开表单清除上次表单的必填验证提示

ElementUI组件Dialog弹窗再次打开表单清除上次表单的必填验证提示

qq_45030898的博客 1392

备战2025数学建模国赛(算法29):博弈论在数学建模竞赛中的应用

博弈论为数学建模竞赛提供了强大的分析工具,尤其适用于涉及多方互动决策的问题。本文介绍了博弈论的核心模型、算法实现及竞赛应用案例,并提供了完整的Python代码实现。扩展阅读方向不完全信息博弈与贝叶斯均衡合作博弈与联盟形成机制设计与拍卖理论随机博弈与马尔可夫决策过程博弈论与机器学习的结合。

YOLO 442

ElementUI form 在dialog中无法正确重置的解决方案

## 问题描述 在用ElementUI做动态表单(比如修改,先将查询出来的数据显示到页面上,然后再重置/修改)时,如果数据的修改是在打开dialog(子组件)中进行操作的,但是在修改数据时,正常来说可以直接调用 this.$refs[str].resetFields() 直接清空,但是这里会出现问题: 原因: form表单的重置是以第一次打开的数据作为重置标准,如果先打开的是更新,那么重置之后以第一次更新的数据作为标准 Dialog 中的内容是懒加载的,目前 edit (更新)方法的写法导致 Form 刚

哈 1478

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

android 蓝牙通讯demo

android 下蓝牙通讯demo,实现了发现蓝牙,使能蓝牙,通过蓝牙发送消息。

ElementUI form表单在dialog中使用,先点击编辑后再点击新增,表单重置无效

在用ElementUI做动态表单时,数据的修改都是打开dialog(子组件)中进行操作的,但是在修改数据时,正常来说可以直接调用 this.$refs[str].resetFields() 直接清空,但是这里会出现一个问题: form表单的重置是以第一次打开的数据作为重置标准,如果先打开的是更新,那么重置之后以第一次更新的数据作为标准; Dialog 中的内容是懒加载的,目前 edit (更新)方法的写法导致 Form 刚加载出来时值就已经是新的了,所以 resetFields 也只能回到新值 解决办

weixin_44269229的博客 1461

蓝牙模块HM-10手册

蓝牙模块HM-10手册,该手册对蓝牙模块HM-10进行了详细的介绍和使用方法以及一些AT指令。

Vue-elementUI 表单校验

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 一、Vue-elementUI 表单校验 二:所遇到问题:清空表单失效 总结 前言 代码仅供参考,具体可以根据自己的项目需求完成表单校验,废话不多说,直接上代码! 提示:以下是本篇文章正文内容,下面案例可供参考 一、Vue-elementUI 表单校验 <!--添加NFC标签--> <el-button @click="dialogFormVisible=true" ..

weixin_52931720的博客 834

IMSL CNL 7.0.0 (x86-64)Crack

IMSL CNL 7.0.0 (x86-64)Crack intel的算法库破解文件,这是C++版本的破解文件

ElementUI form表单在dialog中,先点了编辑后添加,重置表单无效

在用ElementUI做动态表单时,数据的修改都是打开dialog(子组件)中进行操作的,但是在修改数据时,正常来说可以直接调用 this.$refs[str].resetFields() 直接清空,但是这里会出现一个问题: form表单的重置是以第一次打开的数据作为重置标准,如果先打开的是更新,那么重置之后以第一次更新的数据作为标准; Dialog 中的内容是懒加载的,目前 edit (更新...

ksyjy的博客 4642

vue + elementUI 的dialog弹窗里面的form表单重置

在vue项目使用elementUI的开发过程中,经常会用到form表单。对于form表单的重置和清空校验经常会使用到,这里我对自己用到几种方法做一个总结: Element UI自带的清空form表单方法 if(this.$refs.formData){//第一次打开dialog弹窗会报错,所以需要判断一下 this.$refs.formData.resetFields(); //重置表单数据,清除校验信息 } 手动重置formData里的每一项数据配合清空校验信息方法 this.formData

weixin_43299180的博客 9858

vue elementUI dialog弹框中使用表单 表单无法重置

用 nextTick 处理一下form的数据: this.$nextTick(() => { this.student = student; }) 然后在关闭dialog 时调用重置方法: this.$refs[student].resetFields(); 完整代码: <el-dialog title="添加学生信息" :visible.sync="dialogFormVisible" width="32%" :center="true" top="20px"&gt

shiqinghuan的博客 1424

记录el-form+el-dialog表单重置问题

element ui 表单无法重置问题

p_1024的博客 1500

vue3 elementUI 关于el-dialog组件中el-form初始值设置问题以及el-dialog懒加载变即加载解决方案

关于组件赋值有效性问题,需要注意组件实际生成加载时机。尤其是当我们在使用el-dialog时候,需要注意懒加载产生的系列问题。

2301_79406343的博客 2320

elementui dialog中的form不能重置_ElementUI使用的二三事

作者:TYANerelementUI是和vue配套的一个桌面端组件库。虽然是一个通用的组件库,但是由于使用场景的不同,我们可能会遇到一些小问题,以下是我个人的一、、总结。1、Tooptip文字提示tooltip使用时,必须有一个子元素(不能是文本元素)。2、修改主题色2.1 方案一:利用element UI的在线主题生成工具工具地址:https://elementui.github.io/them...

weixin_34847426的博客 713

vue + ElementUI 关闭/取消对话框时清除form表单

要求:在点击x和点击取消时,清空form表单 1、点击x时,清空form表单 解决方法:需要用到dialog组件的before-close属性 <el-dialog title="新增专家信息" :visible.sync="addExpertInfo" :before-close="closeExpertFormDialog"> //关闭dialog前 ...

ZXT149074136的博客 7022

关于elementui中dialog关闭时重置表单

在关闭el-dialog对话框后,再次打开dialog,表单依然显示上次的信息。

weixin_44693550的博客 3079

Vue ElementUI resetForm()表单重置问题

在用ElementUI做动态表单时,数据的修改都是打开dialog(子组件)中进行操作的,但是在修改数据时,正常来说可以直接调用 this.$refs[str].resetFields() 直接清空,但是这里会出现一个问题: form表单的重置是以第一次打开的数据作为重置标准,如果先打开的是编辑,那么重置之后以第一次更新的数据作为标准,即表单的数据为编辑时的数据;我这里进行了逻辑判断,首先你要知道你点重置表单,是真的要清空所有内容,还是要显示最初的内容。在新建和编辑表单的时候,经常需要重置表单。

康宁的博客 2326

ElementUI组件Dialog弹窗再次打开表单仍显示上次数据的解决方法

目录 1.需求分析 2.出现的问题 3.解决方法 1.需求分析 需求是点击新增表单,弹出dialog窗口,确认后页面显示新增的数据 2.出现的问题 第一次新增表单页面 结果显示: 貌似也没有问题,我们第二次进入新增表单 第一个问题就来了,新增表单默认有上次新增表单的值 ,更严重的问题来了!!!再次修改内容,上次添加的表单数据也会跟着改变 结果增加了两个相同的数据(上个数据被改变) 3.解决方法 在打开dialog的按钮绑定方法,重置表单...

qq_45030898的博客 5527
上一篇: java中对于字符串 XX.toString和String.valueOf()以及强制类型转换的区别
下一篇: Spring @Component注解
Alecor
博客等级 码龄11年 25粉丝 123原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值