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)的每一行数据的第一列是勾选框,最后一列是输入框.当某一行的勾选框勾上时,启用该行的输入框,并开启该行输入框的表单验证:取消该行的勾选框,则禁用该行 ...
随机推荐
- opencv图像加文字与运行时间
//获取推断时间 vector<double>layterTimings; double freq = getTickFrequency() / 1000; //得到ms double t ...
- 常见sql注入的类型
这里只讲解sql注入漏洞的基本类型,代码分析将放在另外一篇帖子讲解 目录 最基础的注入-union注入攻击 Boolean注入攻击-布尔盲注 报错注入攻击 时间注入攻击-时间盲注 堆叠查询注入攻击 二 ...
- [CF1303D] Fill The Bag - 贪心
Solution 考虑从低位往高位贪心,设当前在处理第 \(i\) 位,更低位剩余的部分一共可以拼出 \(cnt\) 个 \(2^i\) 如果 \(n\) 的这一位是 \(1\) ,那么这一位就需要处 ...
- C# extract img url from web content then download the img
static void Main(string[] args) { WebClientDemo(); Console.ReadLine(); } static void WebClientDemo() ...
- 爬取豆瓣音乐TOP250的数据
参考网址:https://music.douban.com/top250 因为详细页的信息更丰富,本次爬虫在详细页中进行,因此先爬取进入详细页的网址链接,进而爬取数据. 需要爬取的信息有:歌曲名.表演 ...
- php redis使用
访问连接 远程访问 //实例化 $redis=new Redis(); try{ $redis->connect('47.98.55.11','6379'); $redis->auth(' ...
- 5G三大应用场景
5G三大应用场景:eMBB(增强移动宽带).eMTC(海量物联).uRLLC(高可靠低时延连接) ------20191215闪
- MySQL的DQL语言(查)
MySQL的DQL语言(查) DQL:Data Query Language,数据查询语言. DQL是数据库中最核心的语言,简单查询,复杂查询,都可以做,用select语句. 1. 查询指定表的全部字 ...
- RN开发-Navigator
1.在入口组件render方法中返回<Navigator> let defaultName = 'Welcome'; let defaultCo ...
- mybatis(五):源码分析 - sqlsource创建流程