之前遇到resetFields无效时都是自己手动用this.ruleForm = Object.assign({}, this.ruleForm, this.$options.data().ruleForm) 这种方式来清数据,用了这么久的form表单,resetFields真的是有时候生效有时候又不生效的,于是看了下Element源码,终于发现了其中的奥秘

源码的form-item在mounted的时候是这么写的

mounted() {
if (this.prop) {
this.dispatch('ElForm', 'el.form.addField', [this]); let initialValue = this.fieldValue;
if (Array.isArray(initialValue)) {
initialValue = [].concat(initialValue);
}
Object.defineProperty(this, 'initialValue', {
value: initialValue
}); this.addValidateEvents();
}
},

可以看到整个mounted操作都是基于你定义了prop才可以的,之后就是定义一个initialValue初始值,使用Object.defineProperty来定义默认是不可修改的,加writable属性值才能修改,并且放到this下,然后执行resetFields时把值变成初始值,所以以后需要清空表单,又不想手动清空的那么prop是必须要定义了

Element form表单方法resetFields无效的更多相关文章

  1. Element Form表单实践(上)

    作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...

  2. Element Form表单实践(下)

    作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...

  3. 深入了解Element Form表单动态验证问题 转载

    随风丶逆风 2020-04-03 15:36:41  2208  收藏 3 分类专栏: Vue 随笔 文章标签: 动态验证 el-form elementUI 表单验证 版权 在上一篇<vue ...

  4. Vue Element Form表单时间验证控件使用

    如果直接使用Element做时间选择器,其规则(rules)不添加type:'date',会提示类型错误,处理这个需要规范值的类型为date. 时间格式化过滤器 import Vue from 'vu ...

  5. php form表单提交时,action url中参数无效的解决方法

    表单提交时get方式的一个错误 <form class="form-inline pull-right" method="get" action=&quo ...

  6. element ui form表单清空规则

    公司项目重构,经过商定使用element ui.在重构项目的时候发现一下element ui上很蛋疼的东西. 例如,这个form表单就是一个.趁着在高铁上没事,把想写的东西写一下. 先说一下eleme ...

  7. 封装Vue Element的form表单组件

    前两天封装了一个基于vue和Element的table表格组件,阅读的人还是很多的,看来大家都是很认同组件化.高复用这种开发模式的,毕竟开发效率高,代码优雅,逼格高嘛.虽然这两天我的心情很糟糕,就像& ...

  8. 使用js提交form表单的两种方法

    提交form表单的时候瑶族一些简单的验证,验证完后才能提交,避免无效提交. 1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在前端页面写:有两种方法,一种是用sub ...

  9. Element Ui使用技巧——Form表单的校验规则rules详细说明

    Element UI中对Form表单验证的使用介绍: Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item的 prop 属性设置为需校验的字段名 ...

随机推荐

  1. 深入GraphQL 的使用语法

    深入GraphQL 的使用语法 对于GraphQL 的使用语法在上一节中已经大概介绍了基本的使用方式了,这一篇将会对上一篇入门做拓展,努力将所有的使用语法都覆盖到. 1. 终端语法 首先是介绍在前端查 ...

  2. P5296 [北京省选集训2019]生成树计数

    P5296 [北京省选集训2019]生成树计数 题意 求一个带权无向图所有生成树边权和的 \(k\) 次方的和. 思路 首先有一个结论:\(a^i\) 的 EGF 卷 \(b^i\) 的 EGF 等于 ...

  3. 第七篇 -- photoshop cs6 激活

    下载photoshop cs6破解版 下载amtlib.dll 破解就是将amtlib.dll替换,路径:C:\Program Files\Adobe\Adobe Photoshop CS6 (64 ...

  4. 01MATLAB导论

    MATLAB语言的主要功能 数值计算 符号计算 图形绘制 程序流程控制 工具箱 课程的学习目标 要求理解MATLAB功能实现的数学背景与算法原理 掌握利用MATLAB进行问题求解的基本规律 能够利用M ...

  5. post传参params与body的区别(@RequestParam和@RequestBody的区别)

    1.axios post请求  Content-Type默认为 application/x-www-form-urlencoded,我们传递参数的时,params里面的参数(简单的对象,通过 &quo ...

  6. SQL SERVER 雨量计累计雨量(小时)的统计思路

    PLC中定时读取5分钟雨量值,如何将该值统计为小时雨量作为累计?在sql server group by聚合函数,轻松实现该目的. 1.编写思路 数据库中字段依据datetime每五分钟插入一条语句, ...

  7. 用Ubuntu的命令行来远程访问Jupyter Notebook

    远程访问Jupyter Notebook 相关配置:Ubuntu 16.04服务器,本地Win10,使用了Xshell,Xftp工具. 相关配置主要分为三步: 服务器上的Jupyter配置 本地Xsh ...

  8. BSTestRunner增加历史执行记录展示和重试功能

    之前对于用例的失败重试,和用例的历史测试记录存储展示做了很多的描述呢,但是都是基于各个项目呢,不方便使用,为了更好的使用,我们对这里进行抽离,抽离出来一个单独的模块,集成到BSTestRunner中, ...

  9. Nginx 解析漏洞

    目录 漏洞复现 漏洞成因 修复方案 参考链接 该漏洞与Nginx.php版本无关,属于用户配置不当造成的解析漏洞. 漏洞复现 访问http://172.17.0.1/uploadfiles/nginx ...

  10. C++ 多态 案例(//多态案例----制作饮品 //描述:煮水 冲泡 倒入杯中 加入辅料)

    1 //多态案例----制作饮品 2 //描述:煮水 冲泡 倒入杯中 加入辅料 3 4 #include <iostream> 5 #include <string> 6 us ...