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">查詢</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)文章
這篇文章主要介紹了Vue從TodoList中學(xué)父子組件通信，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
這篇文章主要介紹了vue-devtools安裝使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
Vue.js實(shí)現(xiàn)價(jià)格計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)價(jià)格計(jì)算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
Vue.$set 失效的坑 問(wèn)題發(fā)現(xiàn)及解決方案
這篇文章主要介紹了Vue.$set 失效的坑 問(wèn)題發(fā)現(xiàn)及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-07-07
關(guān)于Vue中過(guò)濾器的必懂小知識(shí)
vue過(guò)濾器可以在不改變?cè)紨?shù)據(jù)，只是對(duì)數(shù)據(jù)進(jìn)行加工處理后返回過(guò)濾后的數(shù)據(jù)再進(jìn)行調(diào)用處理,下面這篇文章主要給大家介紹了關(guān)于Vue中過(guò)濾器必懂小知識(shí)的相關(guān)資料,需要的朋友可以參考下2021-10-10
vue.js中toast用法及使用toast彈框的實(shí)例代碼
這篇文章主要介紹了vue.js中toast用法及使用toast彈框的實(shí)例代碼,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒加載，需要的朋友可以參考下2018-08-08
vue項(xiàng)目中l(wèi)oadsh庫(kù)常用方法說(shuō)明
這篇文章主要介紹了vue項(xiàng)目中l(wèi)oadsh庫(kù)常用方法說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要介紹了關(guān)于axios的proxy代理配置解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
el-form錯(cuò)誤提示信息手動(dòng)添加和取消的示例代碼
這篇文章主要介紹了el-form錯(cuò)誤提示信息手動(dòng)添加和取消,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
在Vue項(xiàng)目開(kāi)發(fā)中,.env文件用于配置不同環(huán)境（開(kāi)發(fā)、測(cè)試、生產(chǎn)）的環(huán)境變量,通過(guò)不同的文件如.env.development和.env.production來(lái)區(qū)分環(huán)境配置,Vue會(huì)根據(jù)運(yùn)行命令自動(dòng)加載對(duì)應(yīng)的配置文件,如使用npm run serve會(huì)加載.env.development2024-11-11