代码因为在保密机上,这里只进行描述并截取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表单功能出现的问题的更多相关文章

  1. v-if案例解析(element-ui form-item 结合 v-if 动态生成rule规则\表单元素,表单无法验证问题剖析 )

    fire 读在最前面: 1.此文章衔接Vue 虚拟Dom 及 部分生命周期初探,相关整体知识点请先阅读后再继续本文阅读 问:当v-if为true时,会重新渲染相关dom节点吗? <child v ...

  2. BootStrap 智能表单系列 六 表单数据绑定(编辑页面的数据绑定)

    本章介绍如何在生成表单后,将一个model的数据展示到form表单中(一般用于编辑页面) 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartF ...

  3. BootStrap 智能表单系列 四 表单布局介绍

    表单的布局分为自动布局和自定义布局两种: 自动布局就是根据配置项中第二级配置项中数组的长度来自动使用不同的bootstrap栅格,通过设置autoLayout为true可以实现自动布局 自动以布局就是 ...

  4. HTML 5 服务器发送事件、Input 类型、表单元素、表单属性

    HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新. Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器 ...

  5. bootstrap 基础表单 内联表单 横向表单

    bootstrap 基础表单 内联表单 横向表单 <!DOCTYPE html> <html> <head> <title></title> ...

  6. php之表单-2(表单验证)

    PHP 表单验证 本章节我们将介绍如何使用PHP验证客户端提交的表单数据. PHP 表单验证 在处理PHP表单时我们需要考虑安全性. 本章节我们将展示PHP表单数据安全处理,为了防止黑客及垃圾信息我们 ...

  7. [H5表单]一些html5表单知识及EventUtil对象完善

    紧接着上面的文章,一开始准备一篇文章搞定,后来看到,要总结的东西还不少,干脆,把上面文章拆成两部分吧,这部分主要讲讲表单知识! 表单知识 1.Html5的autofocus属性. 有个这个属性,我们不 ...

  8. JavaWeb -- Struts1 使用示例: 表单校验 防表单重复提交 表单数据封装到实体

    1. struts 工作流程图 超链接 2. 入门案例 struts入门案例: 1.写一个注册页面,把请求交给 struts处理 <form action="${pageContext ...

  9. Html5学习进阶四 表单元素和表单属性

    HTML5 的新的表单元素: HTML5 拥有若干涉及表单的元素和属性. 本章介绍以下新的表单元素: datalist keygen output 浏览器支持 Input type IE Firefo ...

随机推荐

  1. Springboot打包放到Tomcat中报错 One or more listener fail to start

    1.问题: Springboot项目直接启动不报错,打war包放到外部容器Tomcat.东方通上,在@Weblistener注解的监听器类中报错 One or more listener fail t ...

  2. 深度解密 Go 语言之 sync.map

    工作中,经常会碰到并发读写 map 而造成 panic 的情况,为什么在并发读写的时候,会 panic 呢?因为在并发读写的情况下,map 里的数据会被写乱,之后就是 Garbage in, garb ...

  3. 07.Easymock的实际应用

    第一步下载对应的java包添加到工程中 并静态导入所需要的j类 import static org.easymock.EasyMock.*; 这里有的注意点 package com.fjnu.serv ...

  4. TCP端口扫描类型-隐蔽扫描和僵尸扫描

    TCP扫描有三种类型:全连接扫描,隐蔽扫描,僵尸扫描.全连接扫描无须赘述. 隐蔽扫描:发送完SYN数据包以及收到SYN/ACK数据包后不再发送SCK数据包,由于没有建立完整的TCP连接,所以在目标主机 ...

  5. Python干货整理之数据结构篇

    1 stack的实现 实现接口: init() 用于初始化stack,数据类型为list size() 用于获得stack的大小 push() 用于往栈中添加元素,添加的元素类型可以是int或者lis ...

  6. 不同编程语言实现HelloWorld程序

    目录 C C# C++ HTML Java Python C #include <stdio.h> int main() { printf("Hello World!" ...

  7. .Net: C#中的委托(Delegate)和事件(Event)

    委托和事件在 .Net Framework中的应用非常广泛,然而,较好地理解委托和事件对很多接触C#时间不长的人来说并不容易.它们就像是一道槛儿,过了这个槛的人,觉得真 是太容易了,而没有过去的人每次 ...

  8. P2629 【好消息,坏消息】

    其实刚开始看到这道题,应该很多都会想到区间DP中的合并石子,开一个2倍的空间(严格来说的话应该是2n-1),将本来的环变成一个链式的结构.然后对于得到的消息,可以预处理一个前缀和,这样就可以很方便的知 ...

  9. Yarn的安装和全局配置(源/缓存位置/全局安装位置)

    本文安装环境: Win10 64位 前置条件: 已安装好Node环境(参考Node安装与环境配置) 下载和安装 Yarn安装包下载地址 全局配置 控制台输入命令, 正常显示版本表示安装成功 $ yar ...

  10. Springboot整合MongoDB的Docker开发,其它应用也类似

    1 前言 Docker是容器开发的事实标准,而Springboot是Java微服务常用框架,二者必然是会走到一起的.本文将讲解如何开发Springboot项目,把它做成Docker镜像,并运行起来. ...