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="100px" class="demo-ruleForm">
3 　　 </ el-form>
4 </el-dialog>

1 methods:{
2   closeDialog(){
3         //关闭时表单重置表单
4         this.$refs.addForm.resetFields();
5       }
6 }

form 表单里 model和addForm的值一定要一致！！来自小白的...

原文地址：https://www.cnblogs.com/2001-/p/10916491.html

时间： 2024-10-26 19:21:10

vue+element ui 重置表单的相关文章

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

问题在 vue+element ui 中只有一个输入框(el-input)的情况下,回车会提交表单. 解决方案在 el-form 上加上 @submit.native.prevent 这个则会阻止表单回车提交. 测试下面的代码出现表单回车提交 <body> <div id="app"> <el-form ref="form" :model="form" label-width="80px"&

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

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

基于vue开发的一款强大的表单设计器，支持element和antd-vue表单快速开发。

基于 vue 和 element-ui 实现的表单设计器,使用了最新的前端技术栈,内置了 i18n 国际化解决方案,支持生成element 和 antd-vue 表单,让表单开发简单而高效. 在线预览使用文档特性可视化配置页面提供栅格布局,并采用flex实现对齐一键预览配置的效果一键生成配置json数据一键生成代码,立即可运行提供自定义组件满足用户自定义需求提供远端数据接口,方便用户需要异步获取数据加载提供功能强大的高级组件支持表单验证快速获取表单数据国际化支持组件

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属性,属性名一定要对应表单里的每一个属性

重置表单和提交表单中遇到的小问题

function hidden_edit(){ //隐藏编辑店员 $(".form-horizontal")[0].reset(); //重置的表单中 name值必须和数据库的name值相对应,在按返回键时,才能重置表单内容,如果某一项name的不能重置,那就说明数据库中没有此项name值 $(".y-edit").css("display","none"); $(".y-clerk").css("

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

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

JQuery使用reset重置表单

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

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

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