zoukankan      html  css  js  c++  java
  • 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",让该行有一个必填验证的样式。

    参考链接

  • 相关阅读:
    优化页面响应时间
    php性能优化
    加快compser install 和update的方法
    好用的类库
    php会话(session)实现原理
    mysql引擎
    数据库事物四大特性
    数据库索引
    insert和insertSelective区别
    java面试题之int和Integer的区别
  • 原文地址:https://www.cnblogs.com/pipim/p/14147990.html
Copyright © 2011-2022 走看看