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)表單填寫(xiě)，在 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ù)邏輯寫(xiě)在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中常遇到第三方j(luò)s,這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中如何引入本地第三方JS庫(kù)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
Antd的Table組件嵌套Table以及選擇框聯(lián)動(dòng)操作
這篇文章主要介紹了Antd的Table組件嵌套Table以及選擇框聯(lián)動(dòng)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
vue實(shí)現(xiàn)列表垂直無(wú)縫滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)列表垂直無(wú)縫滾動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
Vue使用pdfobject實(shí)現(xiàn)預(yù)覽pdf的示例詳解
PDFObject?是一個(gè)?JavaScript?庫(kù)用來(lái)在HTML中動(dòng)態(tài)嵌入?PDF?文檔。這篇文章主要為大家詳細(xì)介紹了使用pdfobject實(shí)現(xiàn)預(yù)覽pdf的功能，需要的可以了解一下2023-03-03
這篇文章主要介紹了vue選擇下拉框動(dòng)態(tài)變化表單方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
十個(gè)有用的自定義Vue鉤子函數(shù)總結(jié)
這篇文章主要為大家介紹了十個(gè)Vue.js中有用的自定義鉤子，讓我們的代碼更加好看。文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2022-04-04
vue的index.html中獲取環(huán)境變量和業(yè)務(wù)判斷圖文詳解
這篇文章主要給大家介紹了關(guān)于vue的index.html中獲取環(huán)境變量和業(yè)務(wù)判斷的相關(guān)資料,對(duì)vue來(lái)說(shuō)index.html是一個(gè)總的入口文件,vue是單頁(yè)面應(yīng)用,掛在id為app的div下然后動(dòng)態(tài)渲染路由模板,需要的朋友可以參考下2023-09-09
件間傳參是vue開(kāi)發(fā)過(guò)程中一個(gè)很常見(jiàn)的應(yīng)用,對(duì)于我們后端開(kāi)發(fā)來(lái)說(shuō),每次看到這種組件傳參的代碼就一頭霧水,下面這篇文章主要給大家介紹了關(guān)于VUE3傳值相關(guān)的6種方法,需要的朋友可以參考下2023-04-04
基于Vue3實(shí)現(xiàn)前端埋點(diǎn)上報(bào)插件并打包發(fā)布到npm的詳細(xì)過(guò)程
這篇文章主要介紹了基于Vue3實(shí)現(xiàn)一個(gè)前端埋點(diǎn)上報(bào)插件并打包發(fā)布到npm,本項(xiàng)目采用pnpm進(jìn)行Monorepo環(huán)境搭建,因?yàn)槲磥?lái)這個(gè)項(xiàng)目可能會(huì)加入更多的工具包，需要的朋友可以參考下2022-10-10
本篇文章主要介紹了詳解vue 模版組件的三種用法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07