浅谈VUE, vue + elementui表单重置 resetFields问题(无法重置表单)

问题:

  • elementui在重置表单时,无法使用this.$refs[‘formRefVal‘].resetFields()清空表单数据;
  • elementui 设置rules后没有效果

解决方法:

第一步写入el-form,首先添加ref属性

 <el-form :model="form" ref="roleform"> </el-form>

第二步每一个 el-form-item标签里必须加上prop属性,属性名一定要对应表单里的每一个属性

<el-form-item label="姓名" :label-width="formLabelWidth" prop=‘_name‘>
      <el-input v-model="form._name" autocomplete="off"></el-input>
 </el-form-item>

第三步使用resetFields方法清空数据

 this.$refs.roleform.resetFields();

如果使用了$store.state.fm.plan管理关联表单数据,那么在form中需要添加:model="$store.state.fm"

原文地址:https://www.cnblogs.com/yetiezhu/p/12602394.html

时间: 2024-10-02 22:04:47

浅谈VUE, vue + elementui表单重置 resetFields问题(无法重置表单)的相关文章

浅谈单页应用和多页应用——Vue.js向

浅谈单页应用和多页应用--Vue.js向 多页面 多页面应用:每次页面跳转,后台都会返回一个新的HTML文档,就是多页面应用. 在以往传统开发的应用(网站)大多都是多页面应用,路由由后端来写. 页面跳转=>返回HTML,优点:首屏时间快,SEO效果好,缺点是页面切换慢. 首屏时间快?访问页面,服务器只需要返回一个HTML文件,这个过程就经历了一个HTTP请求,请求响应回来,页面就能被展示出来. SEO(搜索引擎排名)效果好?搜索引擎能识别HTML的内容,根据内容进行排名. 页面切换慢:每一次切换

应用二:Vue之ElementUI Form表单校验

  表单校验是前端开发过程中最常用到的功能之一,根据个人的工作经验总结在此对表单校验功能的基础用法进行整理说明~ 如下代码是Form表单校验的demo示例: <template> <div id="demo"> <el-dialog title="表单校验示例" :close-on-click-modal="false" :visible.sync="dialogVisible" width=&q

浅谈Vue项目优化

前几天看到大家说 vue 项目越大越难优化,带来很多痛苦,这是避免不了的,问题终究要解决,框架的性能是没有问题的,各大测试网站都有相关数据.下面进入正题 转自https://blog.csdn.net/qq_33834489/article/details/79144762 基础优化 所谓的基础优化是任何 web 项目都要做的,并且是问题的根源.HTML,CSS,JS 是第一步要优化的点 分别对应到 .vue 文件内的,<template>,<style>,<script&g

【Vue】浅谈Vue不同场景下组件间的数据交流

浅谈Vue不同场景下组件间的数据“交流” Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完文档许多遍后,写起代码还是不免感到有许多困惑,因为我们不知道其中一些知识点的运用场景.这就是我写这篇文章的目的,探讨不同场景下组件间的数据“交流”的Vue实现 父子组件间的数据交流 父子组件间的数据交流可分为两种: 1.父组件传递数据给子组件 2.子组件传递数据给父组件 父组件传递数据给子组件——pro

Vue浅谈

浅谈Vue 最近在学习Vue相关的知识点并且也做一些练手,就在学习过程中出现的各种坑爹的地方做一个总结!之后再遇到也不会抓瞎. 1.Vue工程的安装 (1)首先先安装node.js这是Vue的运行基础.登录官网下载相关包安装即可,不再赘述. (2)其次是安装Vue-cli 脚手架,进入到cmd命令行去执行下面命令. npm install vue-cli (3)创建基于webpack模板的项目 vue init webpack (项目名) (4)进入项目并且安装依赖包: npm install

浅谈Vue响应式(数组变异方法)

很多初使用Vue的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗? 查看官方文档才发现,不是女神太高冷,而是你没用对方法. 看来想让女神自己动,关键得用对方法.虽然在官方文档中已经给出了方法,但是在下实在好奇的紧,想要解锁更多姿势的话,那就必须先要深入女神的心,于是乎才有了去探索Vue响应式原理的想法.(如果你愿意一层一层地剥开我的心.你会发现,你会讶异-- 沉迷于鬼哭狼嚎 无法自拔QAQ). 前排提示,Vue的响应式原理主要是使用了ES5的Obj

VUE基于ElementUI搭建的简易单页后台

一.项目链接 GitHub 地址: https://github.com/imxiaoer/ElementUIAdmin 项目演示地址:https://imxiaoer.github.io/ElementUIAdmin/dist/index 二.项目依赖 1. 数据请求      "axios": "^0.18.0", 2. 图表控件    "echarts": "^4.2.0-rc.2", 3. 富文本编辑器   "

Vue 浅谈前端js框架vue

Vue Vue近几年来特别的受关注,三年前的时候angularJS霸占前端JS框架市场很长时间,接着react框架横空出世,因为它有一个特性是虚拟DOM,从性能上碾轧angularJS,这个时候,vue1.0悄悄 的问世了,它的优雅,轻便也吸引了一部分用户,开始收到关注,16年中旬,VUE2.0问世,这个时候vue不管从性能上,还是从成本上都隐隐超过了react,火的一塌糊涂,这个时候,angular 开发团队也开发了angular2.0版本,并且更名为angular,吸收了react.vue的

浅谈Vue.use

我们先来看一个简单的事例首先我使用官方脚手架新建一个项目vue init webpack vue-demo然后我创建两个文件index.js plugins.js.我将这两个文件放置在src/classes/vue-use目录下 接下来对这两个文件进行编写 // 文件: src/classes/vue-use/plugins.js const Plugin1 = { install(a, b, c) { console.log('Plugin1 第一个参数:', a); console.log(

浅谈HTML5单页面架构(二)——backbone + requirejs + zepto + underscore

本文转载自:http://www.cnblogs.com/kenkofox/p/4648472.html 上一篇<浅谈HTML5单页面架构(一)——requirejs + angular + angular-route>探讨了angular+requirejs的一个简单架构,这一篇继续来看看backbone如何跟requirejs结合. 相同地,项目架构好与坏不是说用了多少牛逼的框架,而是怎么合理利用框架,让项目开发更流畅,代码更容易管理.那么带着这个目的,我们来继续探讨backbone. 首