Vue 高效清空表单,一键清空表单

前段时间在租个后台的项目,有两处需要一键清空表单数据

一、表单筛选后,需要可以一键清空或者恢复初始化筛选条件

初始化查询数据:

user Form Search:{
	username:null,
	showname:null,
	status:null
}
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如果有默认值,那么这种暴力清除的方式也是不可以用的

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

欢迎看到的同学或者前辈吐槽,或者告诉我还有更好的办法~

JEECG官方博客 CSDN认证博客专家 开源达人 低代码 流程引擎
专注技术开源,打造开源的JAVA低代码平台—JEECG(获得CSDN专家访谈,ITEYE访谈、连续五年中国最火TOP5、十大优秀开源项目等)、免费微信管家平台—JeeWx 捷微(获得2014年微信开发商大会第一名)
已标记关键词 清除标记
相关推荐
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值