关于vue.js:Vue-高效清空表单一键清空表单

37次阅读

共计 678 个字符,预计需要花费 2 分钟才能阅读完成。

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

一、表单筛选后,须要能够一键清空或者复原初始化筛选条件

初始化查问数据:

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