关于iview、element-ui重置表单并清除校验的方法

平时在使用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，这样每次打开弹框它都会生成一个新的表单。

转载于:https://www.cnblogs.com/zhusf/p/10449127.html

关于iview、element-ui重置表单并清除校验的方法相关推荐

重置表单验证清除表单校验信息
重置表单验证清除表单校验信息提交表单验证的时间经常遇见的一个问题再次打开时表单验证依旧存在,这种就很烦,用户体验有点差, 在使用Vant或Element UI框架时经常会遇到,再次打开表单时,原 ...
iview/view UI 表格+表单提交必填验证简单方案
在项目中,经常遇到表单嵌入表格的情况,因此必填验证的需求就比较麻烦了,记录下解决方案,先来上一张效果图: 先简单说下实现原理,这个是view UI form-item的源码: 重点就是框住的地方,g ...
Element UI进行表单校验的时候，输入正确内容后，还有提示问题
问题:表单中输入正确的内容后,还提示请输入内容部分代码如下: // 表单 <el-dialog title="添加用户" :visible.sync="dialo ...
Element UI 重置表单功能
<el-form :model="myForm" ref="myForm"><el-form-item label="机构名称:&q ...
Element UI自定义表单验证公共提取
2019独角兽企业重金招聘Python工程师标准>>> 主要代码: util文件夹下validate.js 文件 export const VDT = {messages:{requ ...
JavaScript实现重置表单（reset）的方法
转自:https://www.jb51.net/article/63305.htm 1 <!DOCTYPE html> 2 <html> 3 <head> 4 &l ...
关于elementUI表单的清除验证以及复合型输入框
目录一.清除表单的验证问题的发生以及解决过程代码总结二.复合型输入框--查询(前置和后置都有的) 问题的发生以及解决过程代码展示一.清除表单的验证问题的发生以及解决过程表单弹窗关闭 ...
关于iView UI的表单Form如何进行前端验证
使用iView UI组件进行表单设计的时候,需要进行到的前端验证. 一.引入iView组件二.表单结构设计完成三.确保表单元素Form相关指令正确设定 <Formstyle="bo ...
vue element form ref 重置表单
<template>&l ...

关于iview、element-ui重置表单并清除校验的方法

关于iview、element-ui重置表单并清除校验的方法相关推荐

最新文章

热门文章