问题:

    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问题(无法重置表单)的更多相关文章

  1. Vue + Element-ui实现后台管理系统(5)---封装一个Form表单组件和Table表格组件

    封装一个Form表单组件和Table组件 有关后台管理系统之前写过四遍博客,看这篇之前最好先看下这四篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-syste ...

  2. Vue + ElementUI的电商管理系统实例01 登录表单

    效果图: 1.首先来根据Element网站实现布局: <template> <div class="login_container"> <div cl ...

  3. vue + ElementUI 关闭对话框清空验证,清除form表单

    前面跟大家提到过 elementUI验证的问题,那么今天就来看看 点击对话框和关闭按钮 怎么清空验证,清空form表单,避免二次点击还会有 验证错误的提示 1.首先在你的对话框 取消按钮 加一个cli ...

  4. Vue Element-ui 框架:路由设置 限制文件类型 表单验证 回车提交 注意事项 监听事件

    1.验证上传文件的类型: (1)验证图片类型 <template> <el-upload class="avatar-uploader" action=" ...

  5. vue + elementui form resetFields方法 无法重置表单

    this.$refs['form'].resetFields(); 方法无法重置.1 el-form 组件 没有添加 ref 属性 <el-form ref="form" : ...

  6. vue elementui form表单验证

    最近我们公司将前端框架由easyui 改为 vue+elementui .自学vue两周 就开始了爬坑之路.业余时间给大家分享一下心得,技术新手加上第一次分享(小激动),有什么不足的地方欢迎大家指正, ...

  7. vue elementUI 表单校验(数组多层嵌套)

    在使用vue element-ui form表单渲染的时候,会遇到这样的数据结构: { "title":''123455, "email":'123456@qq ...

  8. Java快速开发平台强大的代码生成器,JEECG 3.7.5 VUE+ElementUI SPA单页面应用版本发布

    JEECG 3.7.5 VUE+ElementUI SPA单页面应用版本发布 此版本为Vue+ElementUI SPA单页面应用版本,提供新一代风格代码生成器模板,采用Vue技术,提供两套精美模板E ...

  9. v-if案例解析(element-ui form-item 结合 v-if 动态生成rule规则\表单元素,表单无法验证问题剖析 )

    fire 读在最前面: 1.此文章衔接Vue 虚拟Dom 及 部分生命周期初探,相关整体知识点请先阅读后再继续本文阅读 问:当v-if为true时,会重新渲染相关dom节点吗? <child v ...

  10. ElementUI表单验证攻略:解决表单项启用和禁用验证的切换,以及动态表单验证的综合性问题

    试想一种比较复杂的业务场景: 表格(el-table)的每一行数据的第一列是勾选框,最后一列是输入框.当某一行的勾选框勾上时,启用该行的输入框,并开启该行输入框的表单验证:取消该行的勾选框,则禁用该行 ...

随机推荐

  1. docker镜像下载出现:received unexpected HTTP status: 500 Internal Server Error

    1.镜像下载总是出现报错:received unexpected HTTP status: 500 Internal Server Error 2.尝试多种方法: ①阿里云docke加速器:注册之后, ...

  2. open()和with open()的区别

    open 1,打开文件 file=open("文件名",“读写模式”) 2,操作文件 *** 3,关闭文件 file.close() 注意事项: 使用open方法,文件操作完毕之后 ...

  3. 剑指offer-面试题10-斐波那契数列-递归循环

    /* 题目:求斐波那契数列的第n项 */ /* 思路: f(n) = 0 n=0, 1 n=1, f(n-1) + f(n-2) n>1 */ int Fibonacci(int n){ if( ...

  4. maven依赖包无法更新下载

    在IDEA工程中导入已存在的module时,按默认设置,直到完成导入,结果所有的外部依赖包都无法更新下载,即使是更新了setting.xml配置文件信息,依旧是不能更新下载依赖包,现将具体的操作过程和 ...

  5. mac 中 端口占用

    1.   sudo lsof -i :5001 2.   sudo kill -9 PID

  6. gulp常用插件之gulp-rev-rewrite使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-rev-rewrite这是一款重写对由gulp-rev修订的资产的引用. 更多使用文档请点击访问gulp-rev-rewrite工具官网 ...

  7. unity ui中使用onmouseover

    unity ui中鼠标移进或者移出的触发方式与2d.3d的不同,2d.3d物体使用的是onmouseover,ui使用的是OnPointerEnter.需要实现以下两个接口. public class ...

  8. 【Unity|C#】基础篇(16)——文件读写(I/O类)

    [笔记] 文件操作 File / FileInfo / FileStream https://www.runoob.com/csharp/csharp-file-io.html 文本读写 Stream ...

  9. 532-数组中的K-diff数对

    532-数组中的K-diff数对 给定一个整数数组和一个整数 k, 你需要在数组里找到不同的 k-diff 数对.这里将 k-diff 数对定义为一个整数对 (i, j), 其中 i 和 j 都是数组 ...

  10. beego——view 模板语法

    一.基本语法 go统一使用{{和}}作为左右标签,没有其它的标签符号. 使用"."来访问当前位置的上下文,使用"$"来引用当前模板根级的上下文,使用$var来访 ...