element-ui

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

<!-- 明细列表 -->
<el-table :data="midSubmitDetailTableData"   border stripe style="width: 100%">
    <el-table-column prop="submitAmount" label="本次交工数量"></el-table-column>
    <el-table-column prop="confirmAmount" label="审核数量">
        <template slot-scope="scope">
            <input :value="scope.row.confirmAmount" @change="updateConfirmAmount($event, scope.row)" placeholder="请输入审核数量" />
        </template>    
    </el-table-column>
</el-table>

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的表单验证中，简单的验证官网已经写的很简单了，这里不做赘述

问题：当我们在列表循环中需要一次循环显示多个表单的<el-form-item>的时候就会出现 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

代码：

<el-form>
   <el-row :gutter="20" class="notify-wrap"  v-for="(item, index) in form.details">
          <el-col :span="16" style="display: flex;">
                                    <el-checkbox v-model="item['ccsNotifyDetails'][1]['notifyType']" style="position: relative; top: 7px;">邮箱</el-checkbox>
                                    <el-form-item label-width="5px" style="margin-bottom: 0;width: 600px;"
                                                  :rules="[{validator: checkMessage , trigger: 'change' }]"
// 这里绑定prop时， details是第一层循环，必须写上，然后一层一层的一直写到 
//与input绑定的v-mode的值为止，否则会出现验证规则的回调函数参数 value取不到值的问题
                                                  :prop="`details.${index}.ccsNotifyDetails.1.targetStr`">
                                        <el-input placeholder="输入邮箱" v-model="item['ccsNotifyDetails'][1]['targetStr']"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
</el-form>

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

html

<el-form-item prop="testRules" :rules="testRules('自己传参', param1，param2)" >
            <el-input
              v-model.trim="test"
              placeholder="请输入"
        />
    </el-form-item>

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