平时在使用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. 一文详解JavaScript的继承模式

    1 原型链继承 #### ES6中通过原型继承多个引用类型的属性和方法,由于原型和实例的关系,即每个构造函数都有自己的原型对象,同时原型有一个属性指向构造函数,并且实例有一个内部的指针指向原型.如果存 ...

  2. 微信小程序函数间传递url的参数丢失问题

    可以使用encodeURIComponent():函数可把字符串作为 URI 组件进行编码. 可以使用decodeURIComponent():函数可把字符串作为 URI 组件进行解码.  

  3. 手机端wap站网页播放腾讯视频代码

    <div class="detail-con clear"> <div id="mod_player_wrap" class="mo ...

  4. dede调用数据时,字符串替换函数使用

    {dede:sql sql="SELECT typename,typedir,typeimg FROM #@__arctype where topid=30 limit 0,6"} ...

  5. 事项同步事项编码(mt_code)长度超过数据库限制的varchar(32)线上问题

    改下长度限制重新同步下,可以恢复正常!

  6. 【HTML】实战阿里云src页面css模仿基础学习

    实战结果页面gif图片 阿里云src首页模仿完整代码(500行左右) <!DOCTYPE html> <html> <head> <meta charset= ...

  7. P6097-[模板]子集卷积

    正题 题目链接:https://www.luogu.com.cn/problem/P6097 题目大意 长度为\(2^n\)的序列\(a,b\)求一个\(c\)满足 \[c_k=\sum_{i|j=k ...

  8. State Space Model Content

    State Space Model 状态空间模型及其卡尔曼滤波技术 混合正态分布下的状态空间模型及其滤波

  9. JuiceFS v0.17 发布,通过 1270 项 LTP 测试!

    小伙伴们大家好,JuiceFS v0.17 在国庆小长假来临之际如期发布了!这是我们在 2021 年秋季推出的第二个版本,让我们直奔主题,看看都有哪些新变化吧. 本次更新累计 80+ 提交,共有 9 ...

  10. Superior Scheduler:带你了解FusionInsight MRS的超级调度器

    摘要:Superior Scheduler是一个专门为Hadoop YARN分布式资源管理系统设计的调度引擎,是针对企业客户融合资源池,多租户的业务诉求而设计的高性能企业级调度器. 本文分享自华为云社 ...