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