Vue 一键清空表单的实现方法
更新时间：2020年02月07日 15:04:35 作者：麻麻怪大侠
这篇文章主要介绍了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如果有默认值，那么这种暴力清除的方式也是不可以用的
二、我们编辑弹窗，取消后或者关闭后，同样可以采用这种办法来清空哦。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了基于elementUI竖向表格、和并列的案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要介绍了vue项目中监听手机物理返回键的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
这篇文章主要介绍了解决vue无法设置滚动位置的问题 ,需要的朋友可以参考下2018-10-10
computed 计算属性是通过属性计算得来的属性，watch属性变化，就会触发监听的函数。下面通过本文给大家介绍Vue中的 computed 和 watch，感兴趣的朋友一起看看吧2018-06-06
这篇文章主要为大家详细介绍了vue3+vite2实现动态绑定图片的优雅解决方案,文中的示例代码简洁易懂,感兴趣的小伙伴可以跟随小编一起学习一下2023-08-08
本篇文章主要介绍了详解VUE中v-bind的基本用法 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
在大多数 web 产品中，全局的 Message 组件占有较大的使用场景，本文主要介绍了Vue3实现Message消息组件示例，需要的朋友们下面随着小编来一起学习学习吧2021-06-06
这篇文章主要介绍了Vue中CSS动画原理的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-02-02
这篇文章主要介绍了详解IOS微信上Vue单页面应用JSSDK签名失败解决方案，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
这篇文章主要给大家介绍了关于vue-cli3跨域配置的简单方法，文中通过示例代码介绍的非常详细，对大家学习或者使用vue-cli3具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-09-09
最新评论