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)的每一行数据的第一列是勾选框,最后一列是输入框.当某一行的勾选框勾上时,启用该行的输入框,并开启该行输入框的表单验证:取消该行的勾选框,则禁用该行 ...
随机推荐
- Json与Ajax(注册实例)
需要在服务器上进行哈 jquery的ajax方法: // jquery请求 $.ajax({ url: "./server/slider.json", type: "po ...
- ng-辅助操作
创建组件,指令,过滤器和服务 # 创建组件 ng generate component my-new-component # 创建组件别名 ng g component my-new-componen ...
- 任意指定一个key获取该key所处在哪个node节点
需求:任意指定一个key获取该key所处在哪个node节点上. 说明:redis自带的命令可以知道一个key所属的slot,可以知道node master对应哪些slot,但没有key和node的对应 ...
- leetcode四道组合总和问题总结(39+40+216+377)
39题目: 链接:https://leetcode-cn.com/problems/combination-sum/ 给定一个无重复元素的数组 candidates 和一个目标数 target ,找出 ...
- Win10如何设置休眠选项(关于睡眠、休眠、快速启动这几个伪关机功能如何设置更适合笔记本电脑?)
· Win10如何设置休眠选项(关于睡眠.休眠.快速启动这几个伪关机功能如何设置更适合笔记本电脑?) 应用场景 升级正式版win10以后,发现竟然没有休眠选项,从电源管理器里面也没有找到,有时候有些重 ...
- NPOI 生成Excel
private void btnSave_Click(object sender, EventArgs e) { ) != ".xls") { MessageBox.Show(&q ...
- ubuntu设置ulimit
centos系统的设置ulimit的时候是直接修改/etc/security/limits.conf文件,但是在ubuntu中却不行, ubuntu先修改/etc/security/limits.co ...
- 反射_python
一.反射(通过字符串的形式去操作对象中的成员) 1.getattr:获取对象中的字段和方法 2.hasattr:判断对象里面是否有字段或方法 3.setattr:设置对象里面的字段或方法 4.dela ...
- 题解【AcWing279】自然数拆分
题面 因为题目中说参与加法运算的数可以重复,由此可以想到完全背包计数问题. 完全背包计数问题与 \(01\) 背包计数问题只有一个不同: \(01\) 背包计数问题的第二维循环是倒叙循环,而完全背包计 ...
- Python之路Day11
函数名的第一类对象及使用 当作值,赋值给变量 def func(): print(1) print(func) #查看函数的内存地址 a=func print(a) a() 可以当作容器中的元素 de ...