平时在使用iview或者vue重置表单是时,我会习惯使用

this.$refs[formData].resetFields();

但是直接这样写上去方法是不起作用的,

内容必须要在每个form-item里加上prop属性,并且与你v-model的值相同才可以生效

例如:

iview代码段:

<Modal v-model="showDialog" :title="modalTitle" :mask-closable="false">
<Form ref="formData" :model="formData" :rules="ruleValidate" label-position="top">
<FormItem label="姓名:" prop="name">
<Input type="text" v-model="formData.name"/>
</FormItem>
<FormItem label="年龄:" prop="age">
<Input type="text" v-model="formData.age"/>
</FormItem>
</Form>
<div slot="footer">
<Button type="text" @click="cancel('ruleValidate')">取消</Button>
<Button type="primary" @click="Save('ruleValidate')">保存</Button>
</div>
</Modal>

或者

<Modal v-model="showDialog" :title="modalTitle" :mask-closable="false" @on-ok='save' @on-cancel="cancel">
<Form ref="formData" :model="formData" :rules="ruleValidate" label-position="top">
<FormItem label="姓名:" prop="name">
<Input type="text" v-model="formData.name"/>
</FormItem>
<FormItem label="年龄:" prop="age">
<Input type="text" v-model="formData.age"/>
</FormItem>
</Form>
</Modal>

只需在关闭弹框的cancel方法中写上重置表单的方法即可,

  cancel() {
this.$refs.formData.resetFields();
}

后来发现重置表单清除校验有另一种更为简便的方法:

<Modal v-model="showDialog" :title="modalTitle" :mask-closable="false">
<Form v-if="showDialog" ref="formData" :model="formData" :rules="ruleValidate" label-position="top">
<FormItem label="姓名:" prop="name">
<Input type="text" v-model="formData.name"/>
</FormItem>
<FormItem label="年龄:" prop="age">
<Input type="text" v-model="formData.age"/>
</FormItem>
</Form>
<div slot="footer">
<Button type="text" @click="cancel('ruleValidate')">取消</Button>
<Button type="primary" @click="Save('ruleValidate')">保存</Button>
</div>
</Modal>

只需要在From标签上加上v-if="showDialog"这句代码,当关闭弹框时showDialog=false,

再次打开弹框是showDialog置为true,这样每次打开弹框它都会生成一个新的表单。

关于iview、element-ui重置表单并清除校验的方法的更多相关文章

  1. element-ui重置表单并清除校验的方法

    this.$refs['activityForm'].resetFields(); 只会重置之前表单的内容,并不会清空 只需在关闭弹框的cancel方法中写上重置表单的方法即可 cancel() { ...

  2. vue+element ui 重置表单

    <el-dialog :title="addForm.title" :visible.sync="dialogFormVisible" width=&qu ...

  3. element ui form表单清空规则

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

  4. vue + element ui 阻止表单输入框回车刷新页面

    问题 在 vue+element ui 中只有一个输入框(el-input)的情况下,回车会提交表单. 解决方案 在 el-form 上加上 @submit.native.prevent 这个则会阻止 ...

  5. element ui FORM表单

    form表单 Form-Item Slot [label] 旧版语法 <el-form-item label="活动名称" prop="name"> ...

  6. easyui form.rest和clear 重置表单和清除表单数据区别

    easyui中的一般我们在新增和编辑的时候 都是用一个form表单 那新增的时候 需要重置下表单内容,一般用 $('#EditForm').form('reset'); 大部分时候没问题,但是如果表单 ...

  7. JavaScript实现重置表单(reset)的方法

    转自:https://www.jb51.net/article/63305.htm <!DOCTYPE html> <html> <head> <script ...

  8. 重置按钮小tip—为何不能重置表单数据呢

    刚开始学html的同志有时候可能会遇到一个问题,就是为什么在编辑页面里面的重置按钮总是不起作用呢不清空数据呢?接下来就说明一下原因. Reset 对象 Reset 对象代表 HTML 表单中的一个重置 ...

  9. 160927、用jquery 重置表单的方法

    清空 我们项目小小部分的搜索条件: 客户要做的是,只要一键 "清空搜索条件" 即可清空维护地点.订单ID等条件. js函数 //重置表单 function resetform(){ ...

随机推荐

  1. Linux系列(17) - >、>>的用法

    适用场景 输出重定向,将命令结果写入文件当中 差异化 >:覆盖原文件内容 >>:追加文件内容 格式 [命令] > [文件名]:将[命令]的结果覆盖到[文件名]该文件中,如果目录 ...

  2. Linux系列(21) - 光盘、U盘挂载

    挂载光盘 mount命令.umount命令 step-1 建立挂载点 原理:相当于建立盘符,建个目录读取光盘内容 命令:[root@localhost ~]# mkdir /mnt/cdrom/ 备注 ...

  3. Shell系列(16)- 环境变量配置文件简介及source命令

    变量类型 用户自定义变量(本地变量) 环境变量 预定义变量 位置参数变量 source命令 [root@localhost ~]# source 配置文件 或 [root@localhost ~]# ...

  4. PC+PLC通过Modbus协议构建工控系统

    一. 概述 工业设备采用HMI+PLC控制是比较常见的方案,随着工业自动化的要求越来越高,现在很多设备都要求接入企业MES系统,MES系统一般为WEB系统,接口形式大部分为HTTP协议,这种传统方案和 ...

  5. 解除你学习Python自动化测试框架的所有疑惑,开启学习直通车

    学习框架第一步 前言 很多同学学完Python基础后出现迷茫......有同感的小伙伴,点赞关注........ 学习完Python还要学习什么? 什么是自动化测试框架? 如何搭建自动化测试框架? 甚 ...

  6. logback日志入门超级详细讲解

    基本信息 日志:就是能够准确无误地把系统在运行状态中所发生的情况描述出来(连接超时.用户操作.异常抛出等等): 日志框架:就是集成能够将日志信息统一规范后输出的工具包. Logback优势 Logba ...

  7. 从一个舒服的姿势插入 HttpClient 拦截器技能点

    马甲哥继续写一点大前端,阅读耗时5 minute,行文耗时5 Days 今天我们来了解一下如何拦截axios请求/响应? 这次我们举一反三,用一个最舒适的姿势插入这个技能点. axios是一个基于 p ...

  8. Oracle数据泵数据迁移

    1 表空间查询 1.1 检查用户与表空间对应情况 select username,default_tablespace from dba_users; 1.2    查看临时表空间 select ta ...

  9. 解决VSCODE"因为在此系统上禁止运行脚本"报错

    在VSCODE中使用yarn,结果报错: 找了下原因,是因为PowerShell执行策略的问题. 解决方法:   以管理员身份运行vscode;  执行:get-ExecutionPolicy,显示R ...

  10. 学习笔记——不带修序列莫队 (luogu2079)小B的询问

    莫队是一种对于询问的离线算法 时间复杂度:O(\(n \sqrt n\)) 大致思想就是 首先将询问离线,然后对原序列分块,使得每一个\(l和r\)都在一个块里 然后按照左节点排序,若所在的块相等,就 ...