vue + ElementUI 關閉對話框清空驗證，清除form表單

前面跟大家提到過 elementUI驗證的問題，那么今天就來看看 點擊對話框和關閉按鈕 怎么清空驗證，清空form表單，避免二次點擊還會有 驗證錯誤的提示

1、首先在你的對話框 取消按鈕 加一個click事件，例如：（ps:：callOf里面的addGroupData和ref一 一對應起來）

<div slot="footer" class="dialog-footer">
　　<el-button @click="callOf('addGroupData')">取 消</el-button>
    <el-button type="primary" @click="addgroupList('addGroupData');">確 定</el-button>
</div> 

 

2、點擊取消按鈕，關閉對話框，清除表單驗證

callOf(formName){
　　this.creatGroup = false;
　　this.$refs[formName].resetFields();
}

 

3、對話框右上角的close按鈕（before-close：關閉前的回調，會暫停 Dialog 的關閉，function(done)，done 用於關閉 Dialog。 location.reload：刷新整個頁面）

     

closeDialog(done){
　　this.$confirm('確認關閉？')
　　.then(_ => {
    　　done();
        location.reload();
    })
    .catch(_ => { });
}

這樣就設置好了，不會出現 二次點擊時，錯誤提示還遺留在對話框上

 

 

 

如果我的內容對你有幫助，歡迎打賞