Vue+Element-ui表單resetFields無(wú)法重置問(wèn)題
問(wèn)題背景
在開(kāi)發(fā)中自己使用this.$refs[formName].resetFields()出現(xiàn)無(wú)法重置表單的的場(chǎng)景有兩種：
1、<Modal/ >組件內(nèi)表單填寫，在 modal 組件未掛載在 DOM 元素中，就無(wú)法獲取到 form 表單組件的實(shí)例，所以this.$refs[formName]獲取實(shí)例就會(huì)出現(xiàn) undefined 的情況。
2、比如編輯表格數(shù)據(jù)，需要回顯表單數(shù)據(jù)，我們一般的做法就是放表單的 rawValue 賦值就搞定，但是我們從新添加數(shù)據(jù)之前想重置表單就無(wú)效。
下面說(shuō)說(shuō)我遇到上面兩種無(wú)法重置表單問(wèn)題的解決方案：
第一個(gè)無(wú)法解決重置表單解決方案
判斷不是undefined的情況下才會(huì)去調(diào)用 resetFields 方法：
if (this.$refs["form"] !== undefined) {
this.$refs["form"].resetFields();
}第二個(gè)無(wú)法解決重置表單解決方案
回顯填充表單數(shù)據(jù)邏輯寫在nextTick函數(shù)的callback中,nextTick原理大家可自行搜索就有，不多說(shuō)。
Vue2.x
fillFormData(rawValue) {
? this.$nextTick(() => {
? ? for (let key in this.form) {
? ? ? if (rawValue[key]) {
? ? ? ? this.form[key] = rawValue[key];
? ? ? }
? ? }
? });
},Vue3.x
import { nextTick } from 'vue';
const fillFormData = () => {
?? ?nextTick(()=>{
?? ? ?// 數(shù)據(jù)回顯邏輯
?? ?})
}這樣，在添加新的數(shù)據(jù)之前，再調(diào)用一下重置表單resetFields()就可以了。
到此這篇關(guān)于Vue+Element-ui表單resetFields無(wú)法重置問(wèn)題的文章就介紹到這了,更多相關(guān)Vue Element表單resetFields無(wú)法重置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue實(shí)現(xiàn)登錄功能的步驟，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
vue3.0+element表格獲取每行數(shù)據(jù)代碼示例
這篇文章主要給大家介紹了關(guān)于vue3.0+element表格獲取每行數(shù)據(jù)的相關(guān)資料,在element-ui中,你可以通過(guò)為表格的行綁定單擊事件來(lái)獲取表格中的一行數(shù)據(jù),需要的朋友可以參考下2023-09-09
如果你也和我一樣，按照正常的流程下載并且配置了stylus，但是依舊報(bào)錯(cuò)，也許這篇文章就是你的菜，一起來(lái)看看吧2022-08-08
這篇文章主要介紹了Vue項(xiàng)目如何打包成移動(dòng)端APP,本文通過(guò)圖文示例相結(jié)合給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
Vue + Webpack + Vue-loader學(xué)習(xí)教程之功能介紹篇
這篇文章主要介紹了關(guān)于Vue + Webpack + Vue-loader功能介紹的相關(guān)資料，文中介紹的非常詳細(xì)，相信對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-03-03
Vue3?vue-devtools?調(diào)試工具下載安裝使用教程
vue-devtools是一款基于chrome游覽器的插件，用于調(diào)試vue應(yīng)用，這可以極大地提高我們的調(diào)試效率，尤其是對(duì)于初學(xué)vue的朋友來(lái)說(shuō)可謂是一大利器，這篇文章主要介紹了Vue3?vue-devtools?調(diào)試工具下載安裝,需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目中使用openlayers創(chuàng)建地圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue3通過(guò)父子傳值實(shí)現(xiàn)彈框功能
在Vue3中,我們可以通過(guò)?provide?和?inject?來(lái)實(shí)現(xiàn)父子組件之間的數(shù)據(jù)傳遞,這也適用于實(shí)現(xiàn)彈框功能,下面我們就來(lái)學(xué)習(xí)一下vue3實(shí)現(xiàn)彈框功能的具體方法吧2023-12-12
Win11&Win10配置vue開(kāi)發(fā)環(huán)境詳細(xì)圖文教程
目前前端三大框架(vue、react、angular)中vue是前端工程師經(jīng)常使用的,在使用之前需要搭建vue開(kāi)發(fā)環(huán)境,這篇文章主要給大家介紹了關(guān)于Win11&Win10配置vue開(kāi)發(fā)環(huán)境的相關(guān)資料,需要的朋友可以參考下2024-02-02
vue.js與element-ui實(shí)現(xiàn)菜單樹形結(jié)構(gòu)的解決方法
本文通過(guò)實(shí)例給大家介紹了vue.js與element-ui實(shí)現(xiàn)菜單樹形結(jié)構(gòu)，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-04-04