代码因为在保密机上,这里只进行描述并截取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. pdb--Python调试器

    使用python编写程序,必然会遇见bug,而pdb就是python语言的一个好的debugger. 下面介绍pdb的使用方式 1. 单步执行代码,通过命令 python -m pdb xxx.py ...

  2. java 拦截器解决xss攻击

    一.xss攻击 XSS攻击通常指的是通过利用网页开发时留下的漏洞,通过巧妙的方法注入恶意指令代码到网页,使用户加载并执行攻击者恶意制造的网页程序.这些恶意网页程序通常是JavaScript,但实际上也 ...

  3. 一时技痒,撸了个动态线程池,源码放Github了

    阐述背景 线程池在日常工作中用的还挺多,当需要异步,批量处理一些任务的时候我们会定义一个线程池来处理. 在使用线程池的过程中有一些问题,下面简单介绍下之前遇到的一些问题. 场景一:实现一些批量处理数据 ...

  4. liunx 常用快捷键

    1.命令行快捷键ctrl + a //把光标移动到最前面ctrl + e //把光标移动到最后面ctrl + l //清屏ctrl + c //取消ctrl + u //把光标到行首的删除ctrl + ...

  5. sklearn机器学习算法--K近邻

    K近邻 构建模型只需要保存训练数据集即可.想要对新数据点做出预测,算法会在训练数据集中找到最近的数据点,也就是它的“最近邻”. 1.K近邻分类 #第三步导入K近邻模型并实例化KN对象 from skl ...

  6. 深入理解JVM(③)虚拟机的类加载过程

    前言 上一篇我们介绍到一个类的生命周期大概分7个阶段:加载.验证.准备.解析.初始化.使用.卸载.并且也介绍了类的加载时机,下面我们将介绍一下虚拟机中类的加载的全过程.主要是类生命周期的,加载.验证. ...

  7. 学写PEP,参与Python语言的设计

    如果你为Python写了一篇PEP,这篇PEP成功的被Python指导委员会接受了,那么以后你在吹牛皮的时候你就可以说我主导了Python语言某个特性的设计工作. -- 跬蟒 我就问你主导Python ...

  8. Docker基本命令及工作原理

    第一个Docker容器     1.首先确保Docker运行正常:docker info

  9. Python 中的元类到底是什么?这篇恐怕是最清楚的了

    类作为对象 在理解元类之前,您需要掌握 Python 的类.Python 从 Smalltalk 语言中借用了一个非常特殊的类概念. 在大多数语言中,类只是描述如何产生对象的代码段.在 Python ...

  10. ASP.NET MVC 下拉框的传值的两种方式(第二种方式未完成)

    控制器代码: public ActionResult Index() { List<SelectListItem> sli = new List<SelectListItem> ...