element的表單重置表單並用clearValidate消除校驗

在用Element的表單時，我們經常采用的el-dialog彈窗來填寫表單內容，在新增和編輯時打開彈窗。有時我們在填寫完數據沒有保存有刪掉了表單的內容，這時觸發了表單的校驗，然后我們關閉了彈窗。然后我們重新新增打開彈窗，發現之前的表單校驗還沒有消除，這時就需要在關閉彈窗的方法中進行處理。

handleClose:function(){
    var _this = this;
    _this.resetFormData();//重置表單,就是將表單的每一項置空
    _this.dialogVisible=false;//關閉彈窗
    setTimeout(function () {
        _this.$refs['formMsg'].clearValidate();//消除校驗,這里的setTimeOut不能去掉,去掉之后會不生效
    },30);
},

 

常見問題:

我只想消除某個 表單項的校驗
在clearValidate()里以數組形式 填寫表單字段的 prop屬性值,

if (sn != null && sn != "") {
    setTimeout(function () {
        app.$refs['formMsg'].clearValidate(['sn']);
    },30);
}

 

為什么消除校驗不生效
需要用setTimeout包裹
重置表單為什么不用resetFields()
resetFields()方法只是將表單的各項還原為初始值。如果我們在頁面加載成功之后，先點擊編輯回顯數據，這時表單已被賦值。那么這時表單的初始值就是有值的並不是空，所以在關閉彈窗之后，我們再點新增，發現表單的輸入框依然還存在值。那么這樣就是有問題的。