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"。
vue + elementui表单重置 resetFields问题(无法重置表单)的更多相关文章
- Vue + Element-ui实现后台管理系统(5)---封装一个Form表单组件和Table表格组件
封装一个Form表单组件和Table组件 有关后台管理系统之前写过四遍博客,看这篇之前最好先看下这四篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-syste ...
- Vue + ElementUI的电商管理系统实例01 登录表单
效果图: 1.首先来根据Element网站实现布局: <template> <div class="login_container"> <div cl ...
- vue + ElementUI 关闭对话框清空验证,清除form表单
前面跟大家提到过 elementUI验证的问题,那么今天就来看看 点击对话框和关闭按钮 怎么清空验证,清空form表单,避免二次点击还会有 验证错误的提示 1.首先在你的对话框 取消按钮 加一个cli ...
- Vue Element-ui 框架:路由设置 限制文件类型 表单验证 回车提交 注意事项 监听事件
1.验证上传文件的类型: (1)验证图片类型 <template> <el-upload class="avatar-uploader" action=" ...
- vue + elementui form resetFields方法 无法重置表单
this.$refs['form'].resetFields(); 方法无法重置.1 el-form 组件 没有添加 ref 属性 <el-form ref="form" : ...
- vue elementui form表单验证
最近我们公司将前端框架由easyui 改为 vue+elementui .自学vue两周 就开始了爬坑之路.业余时间给大家分享一下心得,技术新手加上第一次分享(小激动),有什么不足的地方欢迎大家指正, ...
- vue elementUI 表单校验(数组多层嵌套)
在使用vue element-ui form表单渲染的时候,会遇到这样的数据结构: { "title":''123455, "email":'123456@qq ...
- Java快速开发平台强大的代码生成器,JEECG 3.7.5 VUE+ElementUI SPA单页面应用版本发布
JEECG 3.7.5 VUE+ElementUI SPA单页面应用版本发布 此版本为Vue+ElementUI SPA单页面应用版本,提供新一代风格代码生成器模板,采用Vue技术,提供两套精美模板E ...
- v-if案例解析(element-ui form-item 结合 v-if 动态生成rule规则\表单元素,表单无法验证问题剖析 )
fire 读在最前面: 1.此文章衔接Vue 虚拟Dom 及 部分生命周期初探,相关整体知识点请先阅读后再继续本文阅读 问:当v-if为true时,会重新渲染相关dom节点吗? <child v ...
- ElementUI表单验证攻略:解决表单项启用和禁用验证的切换,以及动态表单验证的综合性问题
试想一种比较复杂的业务场景: 表格(el-table)的每一行数据的第一列是勾选框,最后一列是输入框.当某一行的勾选框勾上时,启用该行的输入框,并开启该行输入框的表单验证:取消该行的勾选框,则禁用该行 ...
随机推荐
- 博客前端live2D实现
1.本来以为没那么简单,结果看了大佬的https://www.cnblogs.com/liuzhou1/p/10813828.html#4431992的简单明了.效果如下,可随鼠标移动. ①这里添加在 ...
- 网络共享服务(一)之FTP
网络共享服务:ftp,nfs,samba比较 从跨平台角度说, samba, ftp差不多, 而nfs不支持windows平台 从挂载角度说, samba, nfs可以把远程目录挂载到本地目录上, 对 ...
- JS:JS判断提交表单不能为空等验证
这段代码在<form>中有οnsubmit="return on_submit()",如果 onsubmit ()返回 fasle,表单的元素就不会提交,即action ...
- 【14】Softmax回归
在下面的内容中,我们用C来表示需要分的类数. 最后一层的隐藏单元个数为4,为所分的类的数目,输出的值表示属于每个类的概率. Softmax函数的具体步骤如下图: 简单来说有三步: 计算z值(4×1矩阵 ...
- Mac下各种编程环境的配置问题(python java)
首先,去官网下载安装包.直接运行安装.安装完成后,启动器中会多两个应用程序IDLE和Python Launcher. 如果,你习惯在IDLE,直接运行即可. 但你在Terminal中运行python3 ...
- LOJ#508. 「LibreOJ NOI Round #1」失控的未来交通工具
题意 一个带边权无向图,有两种操作:加边以及询问在\(x,x+b,...,x+(c-1)b\)这些数中,有多少个数存在至少一条与之模\(m\)同余的从\(u\)到\(v\)的路径(可以不是简单路径). ...
- ELK学习实验015:日志的自定义index配置
前面使用json格式收集了nginx的日志,但是再index的显示是filebeat-*,现在使用自定义的index进行配置 但是再使用filebeat的7.4版本以后,有一个巨坑,就是按照网络的很多 ...
- 牛客练习赛53-E 老瞎眼 pk 小鲜肉
Problem 这题的题意大概是 给出一段长度为\(n\) 的区间 \(q\)次询问求 \(L\)~ \(R\) 这个区间内 最短的一段区间 \(l\)~\(r\) 使得 \(\oplus_{i=l} ...
- 栈和队列----设计一个有getMin功能的栈
设计一个有getMin功能的栈 设计一个具有getMin功能的栈,可以返回栈中的最小的元素,可以使用现有的栈的数据结构,要求pop/push/getMin操作的时间复杂度是O(1). package ...
- Linux下用Bash语言实现判断素数的功能
题目链接: 题目描述 写一个判断素数的函数,在主函数输入一个整数,输出是否是素数的消息. 输入 一个数 输出 如果是素数输出prime 如果不是输出not prime 样例输入 97 样例输出 pri ...