elementui form resetFields方法 无法重置表单

场景：elementui中dialog对话框中嵌套表单，每次打开对话框，上次的数据都还在里面，
解决一：1.el-form添加ref 2. el-form-item添加prop 3. 在dialog对话框的关闭时间close中设置this.$refs.formData.resetFields()
解决二：给对话框添加v-if 随着对话框的关闭和隐藏重新渲染，但是耗性能

原文地址：https://www.cnblogs.com/my466879168/p/12084176.html

时间： 2024-10-11 20:45:55

elementui form resetFields方法 无法重置表单的相关文章

JQuery使用reset重置表单

本文章主要介绍了使用jQuery重置(reset)表单的方法,需要的朋友可以参考下 原文地址: http://www.hpboys.com/820.html 由于JQuery中,提交表单是像下面这样的: $('#yigeform').reset(); 但是,不幸的是,这样写的话,会有一个让你很郁闷的结果,那就是,表单无法重置! 后来,兴冲冲的查看了JQuery文档,JQuery中并没有reset方法! 那有么没有办法通过JQuery来重置表单呢,答案是有的,不过是一种间接的方法. 如下,因为Fo

vue + elementui表单重置 resetFields问题（无法重置表单）

问题: elementui在重置表单时,无法使用this.$refs['formRefVal'].resetFields()清空表单数据; elementui 设置rules后没有效果 解决方法: 1.表单加ref属性 <el-form ref="refname"></el-form> 2.form的每个item加prop属性(踩了好久的坑这个,需要和绑定数据的最后名称一致,prop属性添加到form-item上) <el-form-item prop=&

浅谈VUE， vue + elementui表单重置 resetFields问题（无法重置表单）

问题: elementui在重置表单时,无法使用this.$refs['formRefVal'].resetFields()清空表单数据; elementui 设置rules后没有效果 解决方法: 第一步写入el-form,首先添加ref属性 <el-form :model="form" ref="roleform"> </el-form> 第二步每一个 el-form-item标签里必须加上prop属性,属性名一定要对应表单里的每一个属性

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

this.$refs['activityForm'].resetFields(); 只会重置之前表单的内容,并不会清空 只需在关闭弹框的cancel方法中写上重置表单的方法即可 cancel() { this.$refs.formData.resetFields(); } 重置表单清除校验有另一种更为简便的方法: <Modal v-model="showDialog" :title="modalTitle" :mask-closable="false

vue+element-ui 实现重置表单内容

今天在做入院管理的时候,需要实现表单内容以及验证信息的重置,具体效果如下: 当我再点击添加添加住院患者按钮打开表单时,应该是这个样子的: 根据Element-UI官方文档提供的方法,我们可以使用这个函数: resetForm(formName) { this.$refs[formName].resetFields(); } 实际使用的时候代码: this.visible = true; this.resetForm('form'); 先显示对话框,再重置表单,如果这两行代码顺序颠倒,点击添加住院

$(&#39;#itemAddForm&#39;).form(&#39;reset&#39;);重置表单是报错？

$('#itemAddForm').form('reset');重置表单是报错Uncaught TypeError: $(...).reset is not a function 以为是方法错误于是就换了$('#itemAddForm').reset()和$('#itemAddForm').resetForm()依然报错. 后来把重置按钮的type属性换成了submit就OK了,<input type="sbumit" onclick="clearForm()"

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

刚开始学html的同志有时候可能会遇到一个问题,就是为什么在编辑页面里面的重置按钮总是不起作用呢不清空数据呢?接下来就说明一下原因. Reset 对象 Reset 对象代表 HTML 表单中的一个重置按钮. 在 HTML 表单中 <input type="reset"> 标签每出现一次,一个 Reset 对象就会被创建. 当重置按钮被点击,包含它的表单中所有输入元素的值都重置为它们的默认值.默认值由 HTML value 属性或 JavaScript 的 defaultVa

vue+element ui 重置表单

1 <el-dialog :title="addForm.title" :visible.sync="dialogFormVisible" width="900px" @close="closeDialog"> 2 <el-form :model="addForm" :rules="rules" ref="addForm" label-width=&

HTML&amp;CSS基础学习笔记1.26-input重置表单

重置表单 <input>的[type]属性值为"button"的时候表示一个普通的按钮,相当于一个<button>标签. <input>的[type]属性值为"reset"时,表示表单重置,它在页面的表现形式也是个按钮,但点击他的时候会让表单重置到页面刚加载时的状态. 看一段代码吧: <!DOCTYPE html> <html lang="en"> <head> <me