前段時(shí)間在租個(gè)后臺(tái)的項(xiàng)目，有兩處需要一鍵清空表單數(shù)據(jù)

一、表單篩選后，需要可以一鍵清空或者恢復(fù)初始化篩選條件

初始化查詢數(shù)據(jù)：

user Form Search：{username:null，showname:null,status:null }

1.在created鉤子深拷貝了一份數(shù)據(jù)模板：

這個(gè)時(shí)候this.defaultUserFormSearch已經(jīng)是this.userFormSearch沒(méi)改變之前的一個(gè)備份

2.在清空按鈕事件觸發(fā)后，再將備份的數(shù)據(jù)this.defaultUserFormSearch賦給this.userFormSearch

注意：這里一定還要是深拷貝，

this.userFormSearch = this.defaultUserFormSearch;(這種做法是錯(cuò)誤的); 如果清空的時(shí)候不深拷貝備份的數(shù)據(jù)this.defaultUserFormSearch，那么this.defaultUserFormSearch將會(huì)和this.userFormSearch關(guān)聯(lián)上，

后面清空之后修改了this.userFormSearch會(huì)牽扯到this.defaultUserFormSearch也被修改，再去清空就會(huì)有問(wèn)題

我們每個(gè)頁(yè)面查詢條件都很多，這里只是拿了最少的一個(gè)舉例子，如果查詢條件更多，我們清空的當(dāng)然也可以采用下面的方式，
這種方式也可以，只不過(guò)當(dāng)里面項(xiàng)目比較多的時(shí)候，我們也要寫好多代碼

或者我們直接把this.userFormSearch = {}，我們status如果有默認(rèn)值，那么這種暴力清除的方式也是不可以用的

二、我們編輯彈窗，取消后或者關(guān)閉后，同樣可以采用這種辦法來(lái)清空哦。

歡迎看到的同學(xué)或者前輩吐槽，或者告訴我還有更好的辦法~

總結(jié)

以上是生活随笔為你收集整理的Vue 高效清空表单，一键清空表单的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。