element-ui

1、如何在 element-ui 的event事件中增加自定义参数

updateConfirmAmount(data, row){
    var _value = data.currentTarget._value;
    var value = data.currentTarget.value;
        
},

2、el-dialog弹框居中

.el-dialog{
       display: flex;
       flex-direction: column;
       margin:0 !important;
       position:absolute;
       top:50%;
       left:50%;
       transform:translate(-50%,-50%);
       /*height:600px;*/
       max-height:calc(100% - 30px);
       max-width:calc(100% - 30px);
   }
   .el-dialog .el-dialog__body{
       flex:1;
       overflow: auto;
   }

3.element-ui中循环嵌套form表单时复杂验证规则的使用

在el的表单验证中，简单的验证官网已经写的很简单了，这里不做赘述

问题：当我们在列表循环中需要一次循环显示多个表单的的时候就会出现 prop不知道如何去绑定或者在自定义验证规则的时候validator表达式里面的回调函数参数value值一直为undefined的情况。

查了好久资料终于找到原因所在，下面写出来给大家参考：

1、动态prop内绑定的属性是要和form内定义的属性名以及model绑定的值要对应上
2、prop内绑定的属性值需要把第一层循环时的父元素key值一并写上一直写到input内绑定的model值，否则会出现上面的问题

例子：
vue文件代码太多，截图看比较直观

image.png

data里面的自定义验证规则：

  Vue({
            data(){
              return{
                // 自定义校验规则
                checkMessage: (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('请输入邮箱'));
                    } else {
                        callback();
                    }
                },
                 form:{
                   details:[
                     {
                        memberSource: "1",
                        comment: "司机老大",
                        ccsNotifyDetails:[
                            {
                              notifyType: "1",
                              targetStr: "1******2"
                            },
                            {
                              notifyType: "1",
                              targetStr: "1******2"
                            }
            
                          ]
                     },
                     {
                        memberSource: "1",
                        comment: "司机老大",
                        ccsNotifyDetails:[
                            {
                              notifyType: "1",
                              targetStr: "1******2"
                            },
                            {
                              notifyType: "1",
                              targetStr: "1******2"
                            }
            
                          ]
                     }
                   ]
                 } 
              }
            }
        })

html里面渲染代码：

image.png

代码：

   
          
                                    邮箱
                                    
                                        
                                    
                                
                            

如果觉得这样绑定prop麻烦，还有一种就是完全自定义验证规则，自己传参数

html

JS

//可以直接放在data里面
testRules: (data，param1，param2) => {
   return [
      {
//在这里 value值是取不到的，只能使用自己传参的data的值
            validator:(rule, value, callback) => {
                if(!data){
                //验证不通过
                callback(new Error('！表单验证'));  
                }   
                //验证通过
                callback(); 
                
            },
            trigger: 'blur'
      }
   ];
}

参考;https://segmentfault.com/a/1190000020921975?utm_source=sf-similar-article
https://segmentfault.com/a/1190000039886801?utm_source=sf-similar-article

4、elementui 时间日期选择器 pickerOptions参数支持自定义传参

    

      出发
    
    
      
      
    
    
      
      
    
 
 export default {
    data() {
        return {
            pickerOptions0: {},
            pickerOptions1: {},
        }
    },
    created(){
        this.pickerOptions0 = function (index,flag)  {
        // 返程
        let date = '',dateStart = ''
        if(index==0) {
          // 行程1
          date = this.detailForm.travelInfos[index].evectionInfo[0].endTime

        }else date = this.detailForm.travelInfos[index-1].evectionInfo[1].endTime
        console.log(index,flag,date)
        return {
          disabledDate(time) {
            if(index==0 && flag==0) return time.getTime() > Date.now() - 8.64e6;
            else return time.getTime() < new Date(date).getTime() - 8.64e7 || time.getTime() > Date.now() - 8.64e6 
          }
        }
      }
      this.pickerOptions1 = function (index,flag)  {
        let date = this.detailForm.travelInfos[index].evectionInfo[flag].startTime
        return {
          disabledDate(time) {
            return time.getTime() <= new Date(date).getTime() - 8.64e7 || time.getTime() > Date.now() - 8.64e6;
          }
        }
      }
    },
}