elementUI彈窗里的表單重置不生效如何解決

本篇內容介紹了“elementUI彈窗里的表單重置不生效如何解決”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

給彈窗添加關閉時的事件：

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

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

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

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

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

有什么區別呢，就比如我剛做的，因為表單是在彈窗里，彈窗默認是關閉狀態，里面的數據沒被初始化，新增和修改都可以打開彈窗，如果先點擊的是新增，表單里的值初始化就是為空的，空就是初始值，但是如果先點擊的是修改，表單里的初始值就是打開的回顯的數據。

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

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

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

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

“elementUI彈窗里的表單重置不生效如何解決”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！