Ant Design Vue resetFields表單重置不生效問(wèn)題及解決
Ant Design Vue resetFields表單重置不生效
使用 Ant Design Vue 的 resetFields 重置表單，當(dāng)新增表單和編輯表單公用一套樣式的時(shí)候， 編輯完成后點(diǎn)擊新增還會(huì)出現(xiàn)老數(shù)據(jù)，如果只是簡(jiǎn)單的新增則一切正常，不知道各位有沒(méi)有遇到這個(gè)問(wèn)題
幾經(jīng)搜索
發(fā)現(xiàn) resetFields 作用不是清空表單，而是將所有字段值重置為初始值。
因此點(diǎn)編輯時(shí)因?yàn)楸韱斡谐跏贾敌畔?，修改完關(guān)閉后 resetFields 會(huì)保留初始值， 再次點(diǎn)擊新增時(shí)就出現(xiàn)了難纏的老數(shù)據(jù)。
改進(jìn)方法
點(diǎn)擊新增時(shí)增加調(diào)用置空表單字段的方法
function resetForm() {
return {
username: '',
alias: '',
email: '',
dept_id: undefined,
phone: '',
}
}
這樣就能無(wú)后顧之憂了
Vue重置表單的坑 resetFields方法
<el-form :inline="true" :model="searchForm" ref="searchForm" class="demo-form-inline">
<el-form-item prop="customerName">
<el-input class="sendmessag-input" v-model="searchForm.customerName" placeholder="請(qǐng)輸入客戶姓名" width="40" />
</el-form-item>
<el-form-item prop="cardIdno">
<el-input class="sendmessag-input" v-model="searchForm.cardIdno" placeholder="請(qǐng)輸入證件號(hào)碼" width="40" />
</el-form-item>
<el-form-item prop="contactPhone">
<el-input class="sendmessag-input" v-model="searchForm.contactPhone" placeholder="請(qǐng)輸入聯(lián)系電話" width="40" />
</el-form-item>
<el-form-item prop="orderNo">
<el-input class="sendmessag-input" v-model="searchForm.orderNo" placeholder="請(qǐng)輸入工單編號(hào)" width="40" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查詢(xún)</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
resetForm() {
this.$refs.searchForm.resetFields();
},坑1
在e-form標(biāo)簽加上ref=“searchForm”，識(shí)別哪個(gè)表單做重置，這個(gè)一般都知道。
坑2
在e-form-item 標(biāo)簽下加prop，resetFields哪些字段的做重置
坑3
在重置的數(shù)據(jù)必須包裹在e-form-item下。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
淺談nuxtjs校驗(yàn)登錄中間件和混入(mixin)
這篇文章主要介紹了淺談nuxtjs校驗(yàn)登錄中間件和混入(mixin)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
Vue中使用highlight.js實(shí)現(xiàn)代碼高亮顯示以及點(diǎn)擊復(fù)制
本文主要介紹了Vue中使用highlight.js實(shí)現(xiàn)代碼高亮顯示以及點(diǎn)擊復(fù)制，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
淺析Visual Studio Code斷點(diǎn)調(diào)試Vue
本篇文章給大家總結(jié)了Visual Studio Code斷點(diǎn)調(diào)試Vue的方法以及心得分享，需要的朋友參考學(xué)習(xí)下。2018-02-02
vue里使用create,mounted調(diào)用方法的正確姿勢(shì)說(shuō)明
這篇文章主要介紹了vue里使用create,mounted調(diào)用方法的正確姿勢(shì)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
詳解Vue webapp項(xiàng)目通過(guò)HBulider打包原生APP（vue+webpack+HBulider）
這篇文章主要介紹了詳解Vue webapp項(xiàng)目通過(guò)HBulider打包原生APP（vue+webpack+HBulider），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
詳解Vue3響應(yīng)式中4個(gè)進(jìn)階API的核心使用場(chǎng)景
這篇文章主要帶大家深入了解一下Vue 3響應(yīng)式系統(tǒng)中那些被低估的進(jìn)階API,例如shallowRef,markRaw等,讓你的應(yīng)用性能瞬間起飛,快跟隨小編一起學(xué)習(xí)一下吧2025-12-12
這篇文章主要介紹了vue百度地圖 + 定位的詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
vue3+ts+vite打包后靜態(tài)資源404無(wú)法加載js和css問(wèn)題解決辦法
這篇文章主要給大家介紹了關(guān)于vue3+ts+vite打包后靜態(tài)資源404無(wú)法加載js和css問(wèn)題的解決辦法,文中通過(guò)代碼以及圖文介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-04-04
Vue如何實(shí)現(xiàn)多頁(yè)面配置以及打包方式
這篇文章主要介紹了Vue如何實(shí)現(xiàn)多頁(yè)面配置以及打包方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue 按鍵修飾符的相關(guān)資料，vue中新增按鍵修飾符和系統(tǒng)修飾符來(lái)處理類(lèi)似的事件，具體內(nèi)容詳情大家參考下本文2018-05-05