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

  今天在做入院管理的时候,需要实现表单内容以及验证信息的重置,具体效果如下:

  当我再点击添加添加住院患者按钮打开表单时,应该是这个样子的:

  根据Element-UI官方文档提供的方法,我们可以使用这个函数:

resetForm(formName) {
        this.$refs[formName].resetFields();
      }

  实际使用的时候代码:

this.visible = true;
        this.resetForm(‘form‘);

  先显示对话框,再重置表单,如果这两行代码顺序颠倒,点击添加住院患者就是没有反应的,如下图所示:

  至此,重置表单内容这个功能做的差不多了,但我发现了一个问题,当我点击添加住院患者按钮,弹出表单dialog之后,我的下拉框是没有数据的。

  

  当我关闭这个dialog,再重新打开的时候,这里的数据就有了。我感觉是跟我的表单验证有关,但问题具体是怎么产生的我不清楚,这个表单验证只是把里面的内容重置为初始值,我的数据在页面刷新之后应该是可以正常拿到的。

  不清楚问题是怎么发生的,那就只好看看控制台了。我对比了刷新页面后第一次打开表单dialog和第二次打开表单dialog发生的错误,果然,第一次打开表单时出现了一个特殊的错误,而第二次打开表单时该错误就消失了。

  百度了一下这个错误,找到了https://www.cnblogs.com/blueroses/p/7722233.html这篇文章,这个博主老哥跟我的情况基本一模一样,解决方法他也提到了。

  按照人家的方法,将代码修改如下:

resetForm(formName){
         if (this.$refs[formName]!==undefined) {
             this.$refs[formName].resetFields();
         }
      }

  问题完美解决!刷新页面后第一次打开表单也能获取到数据了。

原文地址:https://www.cnblogs.com/N1ckeyQu/p/11330884.html

时间: 2024-09-30 23:45:26

vue+element-ui 实现重置表单内容的相关文章

element ui 库中 表单部分 一个很容易忽略的坑!

如果在使用element-ui1.4.* 版本中的表单时,发现某些字段绑定不了值,或者checkbox在你绑定后一点就全选了或者全部选,又或者表单验证时候有些字段没动静,那么十有八九是: 1.el-form 标签绑定data中的form时候,请使用:model="form" 而不是v-model="form". 2.请给el-form-item 标签中加上prop属性. 一些很简单的问题,也是自己踩过的坑,希望能帮到大家.

vue 使用 element ui动态添加表单

html部分 <div class="hello"> <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic"> <el-form-item prop="email" label="邮箱"

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

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

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=&

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

Struts2中UI标签之表单标签介绍

1.在Struts2中UI标签的表单标签分为两种:form标签本身和单个表单标签. 2.Struts2表单标签包括:form.textfield.password.radio.checkbox.checkboxlist.select.doubleselect.combobox.optiontransferselect.optgroup.updownselect.textarea.hidden.file.label.submit.token.head.datepicker.reset.richte

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

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