Vue 一键清空表单的实现方法
前段时间在租个后台的项目,有两处需要一键清空表单数据
一、表单筛选后,需要可以一键清空或者恢复初始化筛选条件
初始化查询数据:
1.在created钩子深拷贝了一份数据模板:
这个时候this.defaultUserFormSearch已经是this.userFormSearch没改变之前的一个备份
2.在清空按钮事件触发后,再将备份的数据this.defaultUserFormSearch赋给this.userFormSearch
注意:这里一定还要是深拷贝,
this.userFormSearch = this.defaultUserFormSearch;(这种做法是错误的);
如果清空的时候不深拷贝备份的数据this.defaultUserFormSearch,那么this.defaultUserFormSearch将会和this.userFormSearch关联上,
后面清空之后修改了this.userFormSearch会牵扯到this.defaultUserFormSearch也被修改,再去清空就会有问题
我们每个页面查询条件都很多,这里只是拿了最少的一个举例子,如果查询条件更多,我们清空的当然也可以采用下面的方式,
这种方式也可以,只不过当里面项目比较多的时候,我们也要写好多代码
或者我们直接把this.userFormSearch = {},我们status如果有默认值,那么这种暴力清除的方式也是不可以用的
二、我们编辑弹窗,取消后或者关闭后,同样可以采用这种办法来清空哦。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
javascript实现页面刷新时自动清空表单并选中的方法
本文实例讲述了javascript实现页面刷新时自动清空表单并选中的方法.分享给大家供大家参考.具体实现方法如下: <script language="javascript"> window.onload=function() { document.forms[0].reset(); placeFocus(); } function placeFocus() { document.forms[0].elements[0].focus(); // assuming the f
-
js清空表单数据的两种方式(遍历+reset)
方法1:遍历页面元素 /* 清空FORM表单内容 id:表单ID*/ function ClearForm(id) { var objId = document.getElementById(id); if (objId == undefined) { return; } for (var i = 0; i < objId.elements.length; i++) { if (objId.elements[i].type == "text") { objId.elements[
-
javascript阻止浏览器后退事件防止误操作清空表单
由于客户大多数是不懂电脑的大菜鸟.所以误操作比较多,有时没有选中文本框,然后不小心按了退格之后,刚刚辛苦填好的表单就什么也后退的没有了.网上查了好多资料,然后整合了一下.分享给大家.也希望酸奶姐姐来看看我的第一篇技术博客.呵呵(别介意我提到了你哦.).废话不多说.上源码. 复制代码 代码如下: $(function(){ //处理键盘事件 禁止后退键(Backspace)密码或单行.多行文本框除外 function banBackSpace(e){ var ev = e || window.ev
-
jQuery实现form表单reset按钮重置清空表单功能
有时候可能需要实现这样的效果:使用ajax提交表单,成功提交表单之后清空表单,如下代码: 复制代码 代码如下: <form> <input name="name1" /><br/> <input name="name1" /><br/> <textarea name="content"></textarea> <a href="javascript
-
字段太多jquey快速清空表单内容方法
做了个复杂查询的页面,字段太多了,填了一次,想清空挺麻烦的 $('#myform')[0].reset(); 虽然reset方法可以做到一部分,但是如果你有个元素是这样的 <input name="percent" value="50"/> 那么点击reset只会还原成50 于是乎,有了以下方法,网上浏览过来, $(':input','#myform') .not(':button, :submit, :reset, :hidden') .val('')
-
jquery清空表单数据示例分享
复制代码 代码如下: function clearForm(form) { // iterate over all of the inputs for the form // element that was passed in $(':input', form).each(function() { var type = this.type; var tag = this.tagName.toLowerCase(); // normalize case // it's o
-
Vue 一键清空表单的实现方法
前段时间在租个后台的项目,有两处需要一键清空表单数据 一.表单筛选后,需要可以一键清空或者恢复初始化筛选条件 初始化查询数据: 1.在created钩子深拷贝了一份数据模板: 这个时候this.defaultUserFormSearch已经是this.userFormSearch没改变之前的一个备份 2.在清空按钮事件触发后,再将备份的数据this.defaultUserFormSearch赋给this.userFormSearch 注意:这里一定还要是深拷贝, this.userFormSea
-
ant design vue的form表单取值方法
目录 ant design vue的form表单取值 官方中有以下两种取值方式 ant design of vue 学习之表单form v-decorator(表单验证,内置绑定,初始值) 数据获取与填充 表单实例 ant design vue的form表单取值 官方中有以下两种取值方式 因为不是很熟悉,所以还是查了文档找了一下使用方式,刚开始查到的文档是这样写的 然后返回了undefined,后来又查询了一些文档,发现我多加了一个props属性,然后使用第二个方法成功了,代码如下: ant d
-
vue中动态绑定表单元素的属性方法
在vue中有时候可能想像使用jq一样给某个元素添加属性,如 $('#select1').attr('disabled','disabled') 这种方法也能实现,但是在vue中能用vue的方法还是尽量不要使用jq 使用vue的方法来添加属性可以这样: <select v-model='issues' class="ui dropdown t-select-list" :disabled='isDisabled'> <option></option>
-
Vue.js自定义事件的表单输入组件方法
Vue.js使用自定义事件的表单输入组件 自定义事件可以用来创建自定义的表单输入组件,使用 v-model 来进行数据双向绑定.要牢记: <input v-model="something"> 这不过是以下示例的语法糖: <input v-bind:value="something" v-on:input="something = $event.target.value"> 所以在组件中使用时,它相当于下面的简写: <
-
Vue+ElementUI实现表单动态渲染、可视化配置的方法
动态渲染就是有一个异步的数据,大概长这样: { "inline": true, "labelPosition": "right", "labelWidth": "", "size": "small", "statusIcon": true, "formItemList": [ { "type": "
-
策略模式实现 Vue 动态表单验证的方法
策略模式(Strategy Pattern)又称政策模式,其定义一系列的算法,把它们一个个封装起来,并且使它们可以互相替换.封装的策略算法一般是独立的,策略模式根据输入来调整采用哪个算法.关键是策略的 实现和使用分离 . 注意:本文可能用到一些编码技巧比如 IIFE(Immediately Invoked Function Expression, 立即调用函数表达式),ES6 的语法 let/const.箭头函数.rest 参数,短路运算符 等,如果还没接触过可以点击链接稍加学习 ~ 1. 你曾
-
vue实现重置表单信息为空的方法
背景 之前表单重置为空的话是这样写的 this.fromline = { access_provider_name: '', // 接入商名称 access_provider_address: '', // 接入商所属地区 remark: '' // 备注 } 直接把表单对象的属性设置为空 今天突然发现一个这样的玩意 少写了好多代码 (开心) this.$refs['fromline'].resetFields() 这个玩意也可以实现表单重置. 以上这篇vue实现重置表单信息为空的方法就是小编分
-
vue 使用自定义指令实现表单校验的方法
笔者近期在公司的项目中使用自定义指令完成了表单校验. 这里将思路分享给大家,并写了一个小demo.这个自定义指令还需要大家自行完善. demo可见Github:vue-form-param-check 首先关于自定义指令的介绍可以参考官网. 首先,在github上已经有了一些开源组件可以支持表单校验.但是对于一些小项目而言,引入一个很大的东西实际上并不好.所以这里利用vue的自定义指令对表单校验进行了简单的实现. 分析 在平时我们所见的表单中,常见的做法有2种: - input框输入时和提交时,
-
Vue中使用vee-validate表单验证的方法
Vue项目遇到要表单验证了吧,对我来说表单验证是个很纠(dan)结(teng)的内容,各种判断凌乱到飞起.往常使用jquery的validate插件做表单验证方便吧,你也可以在Vue里引入jquery的validate插件(如何引入jquery在我上一篇博文有介绍,点击查看).但是我们是做vue项目也,不到实在解决不了还是建议不要引入,因为Vue自己就有表单验证的插件,那就是vee-validate. 我在这并不是详细讲解vee-validate的使用功能,只是快速了解如何在项目里使用vee-v
随机推荐
- 用批处理修改日期 然后在改回来
- js点击弹出div层实现可拖曳的弹窗效果
- 利用VBS脚本自动创建计算机帐户的代码
- IOS中用正则表达式判断输入的内容为8-16位且同时包含数字和字母
- 关于页面被拦截的问题
- asp.net 使用事务
- php实现水仙花数示例分享
- php实现约瑟夫问题的方法小结
- php实现博客,论坛图片防盗链的方法
- Android编程中TextView宽度过大导致Drawable无法居中问题解决方法
- php中curl和file_get_content的区别
- Drupal简体中文语言包安装教程
- Python基于sftp及rsa密匙实现远程拷贝文件的方法
- Ruby基础知识之类
- dim函数第三个参数设置截取字符的长度问题
- apache2服务器的搭建和配置步骤详解
- jquery创建一个ajax关键词数据搜索实现思路
- node.js中的http.response.addTrailers方法使用说明
- 从C/C++迁移到PHP——判断字符类型的函数
- PHP检测接口Traversable用法详解