elementui 使用Form表单 的 resetForm表单功能出现的问题
代码因为在保密机上,这里只进行描述并截取elemen文档中的代码作为参考
今天在开发一个很简单需求的时候遇到的问题,在使用elementui的表单功能,将增和改的表单进行了复用,是在表单的父组件 drawer 的 close 事件中进行resetForm ,但事实上先点击edit按钮 再点add按钮后,表单并没有进行预期的重置
经过对elementui组件中源代码的逻辑查看,发现问题出在了resetFields()这个方法上,这个方法调用的时候会先将form中的props 内容保存,然后当用户对表单进行编辑之后,关闭drawer,触发resetForm事件,resetFields()方法会将表单重置
为之前保存的form中的props内容,而并不是像想象中将表单中的props直接清空。 因此需要在触发事件中加上settimeout 或者 tick 方法,等待dom将表单渲染完成后再存储空的form中的props。
今天为了这个bug console了全组件的变量,最终发现了问题,希望世界没有BUG
elementui 使用Form表单 的 resetForm表单功能出现的问题的更多相关文章
- v-if案例解析(element-ui form-item 结合 v-if 动态生成rule规则\表单元素,表单无法验证问题剖析 )
fire 读在最前面: 1.此文章衔接Vue 虚拟Dom 及 部分生命周期初探,相关整体知识点请先阅读后再继续本文阅读 问:当v-if为true时,会重新渲染相关dom节点吗? <child v ...
- BootStrap 智能表单系列 六 表单数据绑定(编辑页面的数据绑定)
本章介绍如何在生成表单后,将一个model的数据展示到form表单中(一般用于编辑页面) 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartF ...
- BootStrap 智能表单系列 四 表单布局介绍
表单的布局分为自动布局和自定义布局两种: 自动布局就是根据配置项中第二级配置项中数组的长度来自动使用不同的bootstrap栅格,通过设置autoLayout为true可以实现自动布局 自动以布局就是 ...
- HTML 5 服务器发送事件、Input 类型、表单元素、表单属性
HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新. Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器 ...
- bootstrap 基础表单 内联表单 横向表单
bootstrap 基础表单 内联表单 横向表单 <!DOCTYPE html> <html> <head> <title></title> ...
- php之表单-2(表单验证)
PHP 表单验证 本章节我们将介绍如何使用PHP验证客户端提交的表单数据. PHP 表单验证 在处理PHP表单时我们需要考虑安全性. 本章节我们将展示PHP表单数据安全处理,为了防止黑客及垃圾信息我们 ...
- [H5表单]一些html5表单知识及EventUtil对象完善
紧接着上面的文章,一开始准备一篇文章搞定,后来看到,要总结的东西还不少,干脆,把上面文章拆成两部分吧,这部分主要讲讲表单知识! 表单知识 1.Html5的autofocus属性. 有个这个属性,我们不 ...
- JavaWeb -- Struts1 使用示例: 表单校验 防表单重复提交 表单数据封装到实体
1. struts 工作流程图 超链接 2. 入门案例 struts入门案例: 1.写一个注册页面,把请求交给 struts处理 <form action="${pageContext ...
- Html5学习进阶四 表单元素和表单属性
HTML5 的新的表单元素: HTML5 拥有若干涉及表单的元素和属性. 本章介绍以下新的表单元素: datalist keygen output 浏览器支持 Input type IE Firefo ...
随机推荐
- TopK问题,数组中第K大(小)个元素问题总结
问题描述: 在未排序的数组中找到第 k 个最大的元素.请注意,你需要找的是数组排序后的第 k 个最大的元素,而不是第 k 个不同的元素. 面试中常考的问题之一,同时这道题由于解法众多,也是考察时间复杂 ...
- MOJITO 发布一周,爬一波弹幕分析下
MOJITO 最近一直啥都没写,追个热点都赶不上热乎的,鄙视自己一下. 周董的新歌 「MOJITO」 发售(6 月 12 日的零点)至今大致过去了一周,翻开 B 站 MV 一看,播放量妥妥破千万,弹幕 ...
- 记一次mysql小版本升级
最近护网操作比较紧,基线和漏洞检查比较频繁,新扫描出来的mysql漏洞需要修复,没有啥好的修复方法,只剩下升级版本这一条路,生产环境是5.7.12,二进制文件直接解压使用的,看了一下现在最新的版本,5 ...
- vue通过属性绑定为元素设置class样式
第一种方式,直接传递一个数组,注意使用v-bind绑定 <h1 :class="['red','size'">这是一个h1文本</h1&g ...
- Linux 初始化系统 SystemV Upstart
System V 特点 缺点: 启动时间长,init是串行启动,只有前一个进程启动完,才会启动下一个进程 启动脚本复杂,init只是执行启动脚本,不管其他事情,脚本需要自己处理各种情况,这往往使得脚本 ...
- jni不通过线程c回调java的函数 --总结
1.JNIEnv类型是一个指向全部JNI方法的指针.该指针只在创建它的线程有效,不能跨线程传递 2.JavaVM是虚拟机在JNI中的表示,一个JVM中只有一个JavaVM对象,这个对象是线程共享的. ...
- 都在讲DevOps,但你知道它的发展趋势吗?
根据最近的一项集体研究,DevOps的市场在2017年创造了约29亿美元的产值,预计到2022年,这个数字将达到约66亿美元.人工智能的融入和安全性的融入,加上向自动化的巨大转变,可合理预测,在202 ...
- Vue组件篇——Vue3.0中使用高德地图
VUE-CLI 3.0 中配置高德地图 在项目开发中,地图组件 1.首先,需要注册高德开放平台的账号,并在[应用管理]页面[创建新应用],为应用添加Key值 高德开放平台:https://lbs.am ...
- Spring Boot 2.x基础教程:MyBatis的多数据源配置
前两天,我们已经介绍了关于JdbcTemplate的多数据源配置以及Spring Data JPA的多数据源配置,接下来具体说说使用MyBatis时候的多数据源场景该如何配置. 添加多数据源的配置 先 ...
- MongoDB快速入门教程 (3.3)
3.4.聚合 3.4.1.什么是聚合? MongoDB中聚合(aggregate)主要用于处理数据(诸如统计平均值,求和等),并返回计算后的数据结果.有点类似sql语句中的 count(*) 例如上图 ...