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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

您可能感興趣的文章: