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