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