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",让该行有一个必填验证的样式。

《参考链接》