快捷導(dǎo)航

elementUI彈窗里的表單重置不生效問(wèn)題解決

更新時(shí)間：2023年04月25日 15:36:58 作者：小麟

本文主要介紹了elementUI彈窗里的表單重置不生效問(wèn)題解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

還有最后一個(gè)小模塊項(xiàng)目馬上就做完了，最一個(gè)模塊比較簡(jiǎn)單，還是一個(gè)表格，表格每一行的最后有兩個(gè)按鈕，修改和刪除，新增按鈕則在表格外面。點(diǎn)擊修改和新增按鈕可以彈出一個(gè)表單彈窗。修改可以回顯某一行的數(shù)據(jù)到輸入框。本來(lái)回顯什么都沒(méi)問(wèn)題，等我自己測(cè)試才發(fā)現(xiàn)點(diǎn)擊修改后再點(diǎn)擊新增，表單里的輸入框里回顯的數(shù)據(jù)沒(méi)有清空。

第一想法是點(diǎn)擊修改后給輸入框賦值，但是關(guān)閉彈窗后沒(méi)有清空表單數(shù)據(jù)，所以導(dǎo)致點(diǎn)擊新增時(shí)，輸入框數(shù)據(jù)仍在。所以要在彈窗關(guān)閉時(shí)，清空表單數(shù)據(jù)。

給彈窗添加關(guān)閉時(shí)的事件：

<el-dialog id="AddDialog" title="彈窗標(biāo)題" :visible.sync="dialogVisible" width="55%" top="10vh" show-close @close="handleClose">
<!--@close="handleClose" 添加關(guān)閉時(shí)的監(jiān)聽(tīng)事件-->

method:{
    handleClose(){
        this.$refs.dialogForm.resetFields();
	this.dialogVisible = false;
    }
}
//注：表單重置一定要添加prop屬性和ref屬性。prop屬性綁定輸入框綁定的值，ref不能和其他表單重復(fù)

本以為這么做就已經(jīng)好了，等到自己測(cè)試的時(shí)候發(fā)現(xiàn)點(diǎn)擊修改后再點(diǎn)擊新增，重置按鈕好像沒(méi)有生效，但是又好像生效了，就再往上查了下，才知道問(wèn)題出現(xiàn)在哪。

先說(shuō)this.$refs.dialogForm.resetFields();的作用：對(duì)整個(gè)表單進(jìn)行重置，將所有字段值重置為初始值并移除校驗(yàn)結(jié)果

注意是所有字段值是重置為初始值，而不是清空值。

有什么區(qū)別呢，就比如我剛做的，因?yàn)楸韱问窃趶棿袄?，彈窗默認(rèn)是關(guān)閉狀態(tài)，里面的數(shù)據(jù)沒(méi)被初始化，新增和修改都可以打開(kāi)彈窗，如果先點(diǎn)擊的是新增，表單里的值初始化就是為空的，空就是初始值，但是如果先點(diǎn)擊的是修改，表單里的初始值就是打開(kāi)的回顯的數(shù)據(jù)。

這就是為什么重置有時(shí)生效有時(shí)又不生效，而有時(shí)又好像部分生效的原因。

找到原因后就要找到解決辦法，

//修改方法
amend(code) {
    this.dialogVisible = true;
    this.$nextTick(() => {
        // 注意看這里
        以下是回顯方法
    })
}

this.$nextTick()將回調(diào)延遲到下次 DOM 更新循環(huán)之后執(zhí)行。在修改數(shù)據(jù)之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一樣，不同的是回調(diào)的 this 自動(dòng)綁定到調(diào)用它的實(shí)例上。

然后再次點(diǎn)擊就發(fā)現(xiàn)問(wèn)題已經(jīng)解決了。

到此這篇關(guān)于elementUI彈窗里的表單重置不生效問(wèn)題解決的文章就介紹到這了,更多相關(guān)element 表單重置不生效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: