element-UI下拉框設置為multiple，首次進入表單頁面就觸發檢驗事件的bug

起因：今天在做一個功能模塊的時候，給一個表單加了驗證，有一個下拉框設置為多選multiple屬性，在加入驗證之后，首次打開這個窗口，就會觸發一次驗證。

驗證代碼：

appraisalcategoryid: [
　　{ trigger: 'change', required: true, message: this.getRes('ReleaseAppraisalForm.Error.AppraisalCategory')},
],

 

 

原因：select下拉框在設置為多選后，加載頁面就會觸發其中的change事件。

解決方法：設置一個變量用來表示是否是第一次加載這個頁面，如果是第一次加載就不用判斷。

改進后的代碼：

data () {
    let __checkAppraisalCategoryid = (rule, value, callback) => {
        if (!this.isFirstLoad) {
            if (value.length === 0) {
                callback(new Error(this.getRes('ReleaseAppraisalForm.Error.AppraisalCategory')));
            } else {
                callback();
            }
        } else {
            this.isFirstLoad = false;
        }
    };
    return {
        isFirstLoad: true
    };
    appraisalcategoryid: [
        { trigger: 'change', validator: __checkAppraisalCategoryid},
    ],
}

記得在下拉框的el-form-item中加入樣式class = "is-required",讓該行有一個必填驗證的樣式。

《參考鏈接》