代码因为在保密机上,这里只进行描述并截取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. 01.DRF-Web应用模式

    Web应用模式 在开发Web应用中,有两种应用模式: 前后端不分离 前后端分离 1 前后端不分离 在前后端不分离的应用模式中,前端页面看到的效果都是由后端控制,由后端渲染页面或重定向,也就是后端需要控 ...

  2. Pikachu的暴力破解演示-----基于表单的暴力破解

    1 首先打开XAMMP与burpsuite 2 打开游览器输入127.0.0.1:88进入pikachu,(由于我的端口有80改成88所以输入127.0.0.1:88要是没有更改80只需要输入127. ...

  3. 3、尚硅谷_SSM高级整合_使用ajax操作实现修改员工的功能

    当我们点击编辑案例的时候,我们要弹出一个修改联系人的模态对话框,在上面可以修改对应的联系人的信息 这里我们我们要编辑按钮添加点击事件弹出对话框 第一步:在页面中在新增一个编辑联系人的模态对话框 第二步 ...

  4. pick靶场-sql注入

    甲.数字型注入 数字型注入一般提交值没有引号,所以直接在后面构造语句就可以了. 抓包查看 构造语句 提交后 该数据库表内容被爆出来了. 乙.字符型注入 首先我们要知道一点,字符串在数据库中提交是需要用 ...

  5. 文档翻译经验分享(Markdown)

    该教程基于VSCode 加一些插件 youdao translate https://marketplace.visualstudio.com/items?itemName=Yao-Translate ...

  6. MBA都需要学习哪些课程

    MBA课程内容详解: 1.核心课程: 管理经济学.营销管理.战略管理.组织行为学.会计学.公司财务管理.人力资源管理与开发.管理与沟通.经济法.国际贸易 2.学位课程: 商务英语(一.二).管理伦理学 ...

  7. Spring AOP学习笔记05:AOP失效的罪因

    前面的文章中我们介绍了Spring AOP的简单使用,并从源码的角度学习了其底层的实现原理,有了这些基础之后,本文来讨论一下Spring AOP失效的问题,这个问题可能我们在平时工作中或多或少也会碰到 ...

  8. Python 实现短信轰炸机

    原理其实很简单,就是利用selenium包打开各种网站的注册页,输入轰炸的号码,实现轰炸.其实也算是利用了注册漏洞.申明:仅娱乐使用,禁止️用于非法用途!若用于非法用途,后果及法律责任博主一律不承担 ...

  9. React源码之组件的实现与首次渲染

    react: v15.0.0 本文讲 组件如何编译 以及 ReactDOM.render 的渲染过程. babel 的编译 babel 将 React JSX 编译成 JavaScript. 在 ba ...

  10. Spring Cloud系列教程第九篇-Eureka自我保护机制

    Spring Cloud系列教程第九篇-Eureka自我保护机制 本文主要内容: 1:自我保护介绍 2:导致原因分析 3:怎么禁止自我保护 本文是由凯哥(凯哥Java:kagejava)发布的< ...