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)的每一行数据的第一列是勾选框,最后一列是输入框.当某一行的勾选框勾上时,启用该行的输入框,并开启该行输入框的表单验证:取消该行的勾选框,则禁用该行 ...
随机推荐
- Hadoop学习之路(7)MapReduce自定义排序
本文测试文本: tom 20 8000 nancy 22 8000 ketty 22 9000 stone 19 10000 green 19 11000 white 39 29000 socrate ...
- 安装CPULimit到Linux(源码)
运行环境 适用系统:所有Linux系统 当前版本:无 硬件要求:无 安装过程 1.安装依赖 root@localhost:~# apt-get -y install git 2.从GitHUB中克隆源 ...
- iframe刷新另一个iframe
如果是程序: Response.Write("<script language=javascript>"); Response.Write ...
- docker下载镜像太慢的解决方案
参考链接:https://blog.csdn.net/weixin_43569697/article/details/89279225 docker下载镜像卡死或太慢找了网上很多方法,使用镜像中国也是 ...
- PAT (Basic Level) Practice (中文)1038 统计同成绩学生 (20 分)
本题要求读入 N 名学生的成绩,将获得某一给定分数的学生人数输出. 输入格式: 输入在第 1 行给出不超过 1 的正整数 N,即学生总人数.随后一行给出 N 名学生的百分制整数成绩,中间以空格分隔.最 ...
- z3学习档案
Reference: 看雪-z3巧解逆向 知乎:Z3一把梭 z3 solver学习 使用z3约束求解器解决CTF中的题目 Playing with Z3,hacking the serial chec ...
- Linux安装U盘启动报错Failed to load ldlinux.c32
报错信息 使用U盘安装linux无法正常启动 Start booting from USB device... SYSLINUX 5.10 EDD 2013-06-04 Copyright (C) 1 ...
- substring && substr
let string = '0123456';string.substring(0,3);//start: number, end?: number 012(而非 0123)string.substr ...
- sqlalchemy_mptt一次调优
问题背景: 我用sqlalchemy_mptt构建了一个多级分类项目,数据库用了sqlite.随着数据条数越来越多,写入速度逐渐变慢,一棵树的插入甚至需要1分钟,远远不能满足需求 分析思路: 1. 批 ...
- ubuntu set up 1 - 网络
r2v has to be replaced.. 1. 官网下载zip版本,下载安装脚本 https://www.r2v.com/chapter_00/install.html https://ins ...