文档章节

vue + elementui表单重置 resetFields问题(无法重置表单)

YXMBetter
 YXMBetter
发布于 2017/09/11 14:51
字数 213
阅读 1566
收藏 0

问题:

  • 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"
  • 赶紧试试吧,可以的话记得点赞喽

© 著作权归作者所有

共有 人打赏支持
YXMBetter
粉丝 9
博文 170
码字总数 109740
作品 0
昌平
程序员
私信 提问
V.HSIAN/vue-component

vue component 在线文档 https://hsian.github.io/vc-dist/index.html#/component/button Install # 克隆仓库git clone https://github.com/hsian/vue-component.git cd vue-component and n......

V.HSIAN
07/09
0
0
VUE Cookbook 系列:实现可配置组合表单

本案例将会讲解如何使用 vue.js + ElementUI 开发一个简单的 可配置组合表单 Demo。 示例源代码 github 操作演示(GIF 较大): 在左侧新建表单区块,选择区块标题和表单组件类型后点击确定,...

FaryEver
08/01
0
0
GavinZhulei/vue-form-making

vue-form-making 基于Vue,ElementUI快速创建表单,进行数据校验,获取表单数据 演示地址:http://tools.xiaoyaoji.cn/form-marking CDN...

GavinZhulei
09/19
0
0
.Net 权限工作流框架 OpenAuth.Net 企业版上线

.net 中 vue 玩的最溜的,vue 中 .net 玩的最溜的,OpenAuth.Net 企业版正式发布。star 1600+的关注者,数十位付费企业及个人用户见证 OpenAuth.Net 的成长。从简单的 demo 到集权限管理、自...

李玉宝
09/18
1K
7
Vue v2.0.8 发布,轻量级 JavaScript 框架

Vue v2.0.8 发布了,Vue.js 是构建 Web 界面的 JavaScript 库,提供数据驱动的组件,还有简单灵活的 API,使得 MVVM 更简单。 主要更新内容: #4227 修复重用节点上的样式绑定删除功能 (@de...

达尔文
2016/11/21
3.1K
15

没有更多内容

加载失败,请刷新页面

加载更多

EOS官方钱包keosd

EOS官方钱包的名称是keosd,它负责管理你的私钥,并且帮你进行交易的签名。 不过不幸的是,keosd钱包对普通用户并不友好,它是一个命令行程序,目前还没有像以太坊的mist那样的图形化界面,而...

汇智网教程
今天
9
0
ArrayList的实现原理以及实现线程安全

一、ArrayList概述 ArrayList是基于数组实现的,是一个动态的数字,可以自动扩容。 ArrayList不是线程安全的,效率比较高,只能用于单线程的环境中,在多线程环境中可以使用Collections.syn...

一看就喷亏的小猿
今天
12
0
Netty 备录 (一)

入职新公司不久,修修补补1个月的bug,来了点实战性的技术---基于netty即时通信 还好之前对socket有所使用及了解,入手netty应该不是很难吧,好吧,的确有点难,刚看这玩意的时候,可能都不知道哪里...

_大侠__
昨天
21
0
Django简单介绍和用户访问流程

Python下有许多款不同的 Web 框架。Django是重量级选手中最有代表性的一位。许多成功的网站和APP都基于Django。 Django是一个开放源代码的Web应用框架,由Python写成。 Django遵守BSD版权,初...

枫叶云
昨天
26
0
Spring Cloud Stream消费失败后的处理策略(四):重新入队(RabbitMQ)

应用场景 之前我们已经通过《Spring Cloud Stream消费失败后的处理策略(一):自动重试》一文介绍了Spring Cloud Stream默认的消息重试功能。本文将介绍RabbitMQ的binder提供的另外一种重试...

程序猿DD
昨天
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部