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="name">
    <el-input v-model="query.name"></el-input>
</el-form-item>

    3、绑定点击事件中传入refname

<el-form-item>
    <el-button @click="resetForm(‘refname‘)">清空</el-button>
</el-form-item>

    4、注册事件

restForm(refname) {
   this.$refs[refname].resetFields()
}

+ 5、检查是否有初始值
在data数据上需要挂载表单数据初始值为‘‘

    如果使用了$store.state.fm.plan管理关联表单数据,那么在form中需要添加:model="$store.state.fm"。

原文地址:https://www.cnblogs.com/ggsddu/p/12297980.html

时间: 2024-08-24 20:46:45

vue + elementui表单重置 resetFields问题(无法重置表单)的相关文章

vue + ElementUI 关闭对话框清空验证,清除form表单

addRoleDialog() { this.$nextTick(() => { this.$refs.userForm.resetFields() }); }, 原文地址:https://www.cnblogs.com/ckmouse/p/11768810.html

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

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

vue elementUI 表单校验(数组多层嵌套)

在使用vue element-ui form表单渲染的时候,会遇到这样的数据结构: { "title":''123455, "email":'[email protected]', "list": [ { "id": "quis consequat culpa ut pariatur", "name": "et quis irure dolore ullamco",

Vue+Element-UI 多个form表单验证

在开发的过程中   有时根据业务需求提交的表单内容分区分块  内容繁多 业务控制相对复杂的时候  我们应该将页面内容分成若干个组件  这样方便后期维护查找问题  不然时间长了后期维护找问题头都大了 如上图所示  页面表单分为基本设置,上架设置,更多设置3大块  分别将3大块写到3个组件(A,B,C) 提交表单的时候我们要进行表单验证 思路:利用ES6 Promise异步控制 代码如下 组件A <el-form :model="ruleForm" :rules="rule

Vue.js 实战教程 V2.x(12)表单输入绑定

12表单输入绑定 12.1基础用法 你可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素. 文本 <input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p> 多行文本 <spa

Vue躬行记(3)——样式和表单

Vue对DOM元素的class和style两个特性做了专门的增强,即对CSS类和内联样式做了一层封装,通过v-bind指令来处理它们,而接收的表达式既可以是简单的字符串.对象或数组,也可以是复杂的计算属性.不仅如此,Vue还为表单设计了一些语法糖,让表单处理变得尤为简单. 一.CSS类 v-bind指令与class参数配合,就能处理CSS类,并且能接收多种类型的值. 1)对象 v-bind:class可以接收一个对象,对象的属性名就是CSS类名,只有当其值是真值时,才能添加到DOM元素上,否则会

spring boot + vue + element-ui全栈开发入门——基于Electron桌面应用开发

 前言 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时环境中,并将其打包为Mac,Windows和Linux系统下的应用来实现这一目的. Electron于2013年作为构建Github上可编程的文本编辑器Atom的框架而被开发出来.这两个项目在2014春季开源. 目前它已成为开源开发者.初创企业和老牌公司常用的开发工具. 看看谁在使用Electron

第一百八十六节,jQuery,验证表单插件,Ajax 表单插件,验证和提交表单

jQuery,验证表单插件,Ajax 表单插件,验证和提交表单 HTML <form id="reg" method="post" action="yzh.php" title="会员注册"> <ol class="reg_error"></ol> <p> <label for="user">帐号:</label>

表单(上)EasyUI Form 表单、EasyUI Validatebox 验证框、EasyUI Combobox 组合框、EasyUI Combo 组合、EasyUI Combotree 组合树

EasyUI Form 表单 通过 $.fn.form.defaults 重写默认的 defaults. 表单(form)提供多种方法来执行带有表单字段的动作,比如 ajax 提交.加载.清除,等等.当提交表单时,调用 'validate' 方法来检查表单是否有效. 用法 创建一个简单的 HTML 表单.构建表单并给 id.action.method 赋值. <form id="ff" method="post"> <div> <lab

Vue+ElementUI,input控件清空数据恢复问题

在Vue+ElementUI 中做数据校验.当用户输入错误时清空input控件在特定情况下会出现原有清空数据会恢复.这是因为在Vue中数据是双向绑定的,只清空控件文字但form表单中还有数据. ======  此问题暂无解决方案  ===== 附问题代码: 1 <el-form-item label="编号" prop="asgnum" > 2 <el-input v-model="form.asgnum" auto-compl