之前遇到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. PAT乙级:1014 福尔摩斯的约会 (20分)

    PAT乙级:1014 福尔摩斯的约会 (20分) 题干 大侦探福尔摩斯接到一张奇怪的字条:我们约会吧! 3485djDkxh4hhGE 2984akDfkkkkggEdsb s&hgsfdk ...

  2. PHP的图片转base64,base64图片转换为图片并保存代码

    打卡记录 1. 图片转base64代码 /*图片转换为 base64格式编码*/ $img = 'images/avatar.jpg'; $base64_img = base64EncodeImage ...

  3. java常见的面试题(二)

    1.mybatis 中 #{}和 ${}的区别是什么? #{}是预编译处理,${}是字符串替换: Mybatis在处理#{}时,会将sql中的#{}替换为?号,调用PreparedStatement的 ...

  4. VUP虚拟直播与光学动作捕捉技术

    虚拟直播将虚拟场景.虚拟形象实时显示在观众面前,虚拟场景与人物替代了原有的耗费较大搭建成本的实景场景与真人出镜,为观众带来全新的视觉体验,同时新技术降低了原有场景搭建成本,是近些年继AI.VR.动作捕 ...

  5. 构建前端第7篇之---elementUI设置主题,进而改变全局button底色

    张艳涛写于2020-1-20 What:是elementUI主题? 是内置的格式,elementUI默认只有一个主题,如果想整体替换按钮的颜色等问题,那么就可以用主题 设置步骤 在路径src/styl ...

  6. Intouch/ifix语音报警系统制作(3-利用自定义过程和函数,重构先前版本)

    在语音模块嵌入了半年左右的时间,经过实际使用发现,代码冗余,重复太多,维护较难,新增也不易,故而对整个框架进行整理,实现简单添加,维护容易的目的. 1.代码优化 1.1构建自定义过程 name 参数代 ...

  7. vue实现单点登录的N种方式

    最近项目停工了,RageFrame的学习暂时告一段落,这一篇给大家分享下有关单点登录的相关知识,并提供一些demo给大家参考,希望对想了解的朋友有一些帮助. 话不多说,先上原理(借鉴地址:https: ...

  8. netty系列之:netty中的Channel详解

    目录 简介 Channel详解 异步IO和ChannelFuture Channel的层级结构 释放资源 事件处理 总结 简介 Channel是连接ByteBuf和Event的桥梁,netty中的Ch ...

  9. user-agent随笔

    常用的user-agent: 一.pc端的user-agent汇总,各大浏览器 1.safari 5.1 – MAC Mozilla/5.0 (Macintosh; U; Intel Mac OS X ...

  10. 刷到血赚!字节跳动内部出品:722页Android开发《360°全方面性能调优》学习手册首次外放,附项目实战!

    前言 我们平时在使用软件的过程中是不是遇到过这样的情况:"这个 app 怎么还没下载完!"."太卡了吧!"."图片怎么还没加载出来!".&q ...