Vue 一鍵清空表單的實(shí)現(xiàn)方法
前段時(shí)間在租個(gè)后臺(tái)的項(xiàng)目，有兩處需要一鍵清空表單數(shù)據(jù)
一、表單篩選后，需要可以一鍵清空或者恢復(fù)初始化篩選條件
初始化查詢數(shù)據(jù)：
1.在created鉤子深拷貝了一份數(shù)據(jù)模板：
這個(gè)時(shí)候this.defaultUserFormSearch已經(jīng)是this.userFormSearch沒改變之前的一個(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ì)有問題
我們每個(gè)頁面查詢條件都很多，這里只是拿了最少的一個(gè)舉例子，如果查詢條件更多，我們清空的當(dāng)然也可以采用下面的方式，
這種方式也可以，只不過當(dāng)里面項(xiàng)目比較多的時(shí)候，我們也要寫好多代碼
或者我們直接把this.userFormSearch = {}，我們status如果有默認(rèn)值，那么這種暴力清除的方式也是不可以用的
二、我們編輯彈窗，取消后或者關(guān)閉后，同樣可以采用這種辦法來清空哦。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue 使用v-if切換輸入框時(shí)導(dǎo)致輸入框的數(shù)據(jù)內(nèi)容沒有清空的問題解決(兩種解決方法)
這篇文章主要介紹了vue 使用v-if切換輸入框時(shí)導(dǎo)致輸入框的數(shù)據(jù)內(nèi)容沒有清空的問題解決，本文給大家分享兩種解決方法,需要的朋友可以參考下2023-05-05
vue 使用iView組件中的Table實(shí)現(xiàn)定時(shí)自動(dòng)滾動(dòng)效果
要在css中設(shè)置table的高度,使數(shù)據(jù)過多時(shí)出現(xiàn)滾動(dòng)條,將縱向設(shè)置為overflow-y: auto;橫向設(shè)置隱藏 overflow-x: hidden,接下來通過本文介紹vue使用iView組件中的Table實(shí)現(xiàn)定時(shí)自動(dòng)滾動(dòng)效果,需要的朋友可以參考下2024-05-05
這篇文章主要為大家詳細(xì)介紹了vue圖片上傳組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
Vue動(dòng)態(tài)修改網(wǎng)頁標(biāo)題的方法及遇到問題
Vue下有很多的方式去修改網(wǎng)頁標(biāo)題，這里總結(jié)下解決此問題的幾種方案:,需要的朋友可以參考下2019-06-06
Vue后臺(tái)管理系統(tǒng)之實(shí)現(xiàn)分頁功能示例
本文主要介紹了Vue后臺(tái)管理系統(tǒng)之實(shí)現(xiàn)分頁功能，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
基于Vue實(shí)現(xiàn)鼠標(biāo)滾動(dòng)輪控制頁面橫向滑動(dòng)效果
這篇文章主要介紹了如何基于Vue實(shí)現(xiàn)鼠標(biāo)滾動(dòng)輪控制頁面橫向滑動(dòng)效果,文中通過代碼示例和圖文結(jié)合的方式給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-09-09
最近在項(xiàng)目中自己封裝的一個(gè)記錄一下,下面這篇文章主要給大家介紹了關(guān)于利用Vue3封裝一個(gè)彈框組件的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-12-12
這篇文章主要為大家介紹了vue3封裝echarts組件最佳形式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
詳解vue.js 開發(fā)環(huán)境搭建最簡(jiǎn)單攻略
本篇文章主要介紹了vue.js 開發(fā)環(huán)境搭建最簡(jiǎn)單攻略，這里整理了詳細(xì)的步驟，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
最近聽到有人提到了Vue2的functional組件,大致上是說這個(gè)東西沒有生命周期,在渲染層面上,會(huì)減少很多的消耗,一番處理之后,首屏?xí)r間和內(nèi)存都能減少不少,所以本文小編就來和大家聊聊Vue2中的functional組件<BR>2023-08-08