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)的每一行数据的第一列是勾选框,最后一列是输入框.当某一行的勾选框勾上时,启用该行的输入框,并开启该行输入框的表单验证:取消该行的勾选框,则禁用该行 ...
随机推荐
- DSP定点与浮点计算
在定点DSP芯片中,采用定点数进行数值运算,其操作数一般采用整型数来表示.一个整型数的最大表示范围取决于DSP芯片所给定的字长,一般为16位或24位.显然,字长越长,所能表示的数的范围越大,精度也越高 ...
- 今天才知道a标签的href="#"是回到页面顶部
如题,真的是,做了一年多的开发,今天才知道a标签的href="#"是回到顶部.以前一直以为这是个多么了不起的功能. 顺便扩展一下滑动隐藏和显示按钮(从别处拷贝来的代码) $( do ...
- sqli-labs less-11 --> less-12
Less-11(报错注入POST方式) 1.判断是否存在注入点 因为是POST 方式的与GET方式稍有不同,可以选择使用burp suite以及火狐的hackbar进行操作,直接在输入框usernam ...
- 设置 myeclipse 编码格式
参考网址:https://jingyan.baidu.com/article/77b8dc7fc6e1626174eab6bb.html
- chm文件打开空白无内容
问题描述 chm文件打开空白无内容 解决方案 选中 chm 文件,右键 - 属性- 在弹出的对话框中点击右下方的“接触锁定”,之后点击“应用”,再点击“确定”
- RHEL 8 安装 Oracle 19c 注意问题
RedHat Enterprise Linux 8 版本静默安装 Oracle 数据库软件时,需注意的问题 来自博客园AskScuti 1. 提示缺少库文件 libnsl.so.1 2. 因着OS版本 ...
- js监听textarea 内容的变化,并计算内容的长度c
html代码如下: <div class="customer-message"> <label for="customerMessage&quo ...
- 关于npm 的注意事项
npm install 之后 会生成package-lock.json 文件 ,注意这个文件不能删除,否则每次 npm i 之后,node_modules都装的是最新的,会出现意想不到的问题.
- Visual Studio 问题汇总
VS2019 16.3.6 1 JSON 文件没有进行格式化验证 开发时运行正常,部署在IIS中有错误提示. 2 .NET Core 3.0 没有提供中文包 所有注释都是英文的.
- MySQL启动失败故障思路
1.1 查看 日志 默认路径在数据路径下,以当前主机名加上.err命名 如主机名为tz,数据路径为/mnt/mysql_data目录下 日志文件为tz.err [root@tz mysql_data] ...