之前遇到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. js 正序、倒序、按字段排序方法

    js 基础--sort方法: arrayObject.sort(sortby); 参数:定义排序规则(正序.倒序.按字段排序)的函数: 返回值:对数组的引用.请注意,数组在原数组上进行排序,不生成副本 ...

  2. 多项式求值问题(horner规则)——Python实现

    # 多项式求值(Horner规则) # 输入:A[a0,a1,a2...an],x的值 # 输出:给定的x下多项式的值p   # Horner迭代形式实现 1 # 在此修改初值 2 A = [2, 6 ...

  3. 【阿菜读论文】ContractFuzzer:fuzzing方法挖掘智能合约漏洞

    论文简介 论文标题:ContractFuzzer: Fuzzing Smart Contracts for Vulnerability Detection 论文链接:ContractFuzzer: F ...

  4. Rancher监控指标一文干到底

    一.工作负载指标 直接截取一个生产环境的rancher的web管理端-工作负载指标模块的图(这里没有汉化,直接英文)如下: 共5个大指标: CPU使用 内存使用 网络包 网络IO 磁盘IO 自学入口: ...

  5. 桌面小部件AppWidgetProvider简单分析

    1.一般桌面小部件涉及到的类 AppWidgetProvider :BroadcastRecevier子类,用于接收更新,删除通知 AppWidgetProvderInfo:AppWidget相关信息 ...

  6. Flutter学习(8)——CheckBox多选框使用及动态更改多选框数据

    原文地址:Flutter学习(8)--CheckBox多选框使用及动态更改多选框数据 | Stars-One的杂货小窝 最近项目需求需要调整页面,记录一下实现过程 这次主要是要实现个评价页面,选择不同 ...

  7. Windows 系统安装 git基础小白的简单操作包含基本输入命令

    首先  去官网下载git应用 https://git-scm.com/downloads  点击前往 安装的操作也比较简单,一直点击下一步 安装完成之后   在空白桌面点击是否有   Git  Gui ...

  8. vulnhub-靶机Lampiao

    目标信息:攻击机IP地址:192.1681.10 Lampiao靶机IP地址:192.168.1.12 DC-1靶机IP地址:192.168.1.7 目的:获取靶机root权限和靶机设置的所有flag ...

  9. 2021字节跳动校招秋招算法面试真题解题报告--leetcode19 删除链表的倒数第 n 个结点,内含7种语言答案

    2021字节跳动校招秋招算法面试真题解题报告--leetcode19 删除链表的倒数第 n 个结点,内含7种语言答案 1.题目描述 给你一个链表,删除链表的倒数第 n 个结点,并且返回链表的头结点. ...

  10. String s="a"+"b"+"c",到底创建了几个对象?

    首先看一下这道常见的面试题,下面代码中,会创建几个字符串对象? String s="a"+"b"+"c"; 如果你比较一下Java源代码和反 ...