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如果有默认值，那么这种暴力清除的方式也是不可以用的

二、我们编辑弹窗，取消后或者关闭后，同样可以采用这种办法来清空哦。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 字段太多jquey快速清空表单内容方法

    做了个复杂查询的页面,字段太多了,填了一次,想清空挺麻烦的 $('#myform')[0].reset(); 虽然reset方法可以做到一部分,但是如果你有个元素是这样的 <input name="percent" value="50"/> 那么点击reset只会还原成50 于是乎,有了以下方法,网上浏览过来, $(':input','#myform') .not(':button, :submit, :reset, :hidden') .val('')

  • jQuery实现form表单reset按钮重置清空表单功能

    有时候可能需要实现这样的效果:使用ajax提交表单,成功提交表单之后清空表单,如下代码: 复制代码 代码如下: <form> <input name="name1" /><br/> <input name="name1" /><br/> <textarea name="content"></textarea> <a href="javascript

  • 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

  • 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实现页面刷新时自动清空表单并选中的方法

    本文实例讲述了javascript实现页面刷新时自动清空表单并选中的方法.分享给大家供大家参考.具体实现方法如下: <script language="javascript"> window.onload=function() { document.forms[0].reset(); placeFocus(); } function placeFocus() { document.forms[0].elements[0].focus(); // assuming the f

  • javascript阻止浏览器后退事件防止误操作清空表单

    由于客户大多数是不懂电脑的大菜鸟.所以误操作比较多,有时没有选中文本框,然后不小心按了退格之后,刚刚辛苦填好的表单就什么也后退的没有了.网上查了好多资料,然后整合了一下.分享给大家.也希望酸奶姐姐来看看我的第一篇技术博客.呵呵(别介意我提到了你哦.).废话不多说.上源码. 复制代码 代码如下: $(function(){ //处理键盘事件 禁止后退键(Backspace)密码或单行.多行文本框除外 function banBackSpace(e){ var ev = e || window.ev

  • Vue 一键清空表单的实现方法

    前段时间在租个后台的项目,有两处需要一键清空表单数据 一.表单筛选后,需要可以一键清空或者恢复初始化筛选条件 初始化查询数据: 1.在created钩子深拷贝了一份数据模板: 这个时候this.defaultUserFormSearch已经是this.userFormSearch没改变之前的一个备份 2.在清空按钮事件触发后,再将备份的数据this.defaultUserFormSearch赋给this.userFormSearch 注意:这里一定还要是深拷贝, this.userFormSea

  • ant design vue的form表单取值方法

    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

随机推荐