el-form 表单遇到的问题汇总

1、 多选框 一进页面就会触发校验 

vue 下拉框多选校验问题_vue下拉框多选校验老存在-CSDN博客

参考的上述链接博文：

解决：校验规则加上type："array"； 并且下拉多选框绑定的变量初始值设置为[] 

  checkArrRequired: [
    { type:"array", required: true, validator: checkArrRequired, trigger:                 
      ['blur','change','input']}
  ],

// 初始值    
   data() {
        return {
            baseInfoData: {
              xxxx: [], //多选绑定的值 默认为[]
            },
        };
    },

2、获取下拉选项的label值

有时候需要用到下拉框绑定的label

两种方法

1、利用el-option 对应的选项数组 查找出来对应的元素 从而得到结果

let obj = this.xxxxx.find((item) => item.key === this.xxxxxForm.xxxxx)
this.xxxxForm.xxxxxValue = obj.value

2、 给el-select 绑定ref值  xxxxSelect

然后直接通过this.$refs.xxxxSelect.selected.currentLabel

3、el-row el-col布局时 排版出现错乱 有空白

el-row和el-col的中的span元素之和超过了24的时候，就会出现排版错乱

解决：添加CSS样式

 .el-row {
   display: flex; 
   flex-wrap: wrap; 
 }

未完待续。。