1、如何在 element-ui 的event事件中增加自定義參數(shù)

<!-- 明細(xì)列表 -->
<el-table :data="midSubmitDetailTableData"   border stripe style="width: 100%">
    <el-table-column prop="submitAmount" label="本次交工數(shù)量"></el-table-column>
    <el-table-column prop="confirmAmount" label="審核數(shù)量">
        <template slot-scope="scope">
            <input :value="scope.row.confirmAmount" @change="updateConfirmAmount($event, scope.row)" placeholder="請(qǐng)輸入審核數(shù)量" />
        </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中循環(huán)嵌套form表單時(shí)復(fù)雜驗(yàn)證規(guī)則的使用

在el的表單驗(yàn)證中，簡(jiǎn)單的驗(yàn)證官網(wǎng)已經(jīng)寫(xiě)的很簡(jiǎn)單了，這里不做贅述

問(wèn)題：當(dāng)我們?cè)诹斜硌h(huán)中需要一次循環(huán)顯示多個(gè)表單的<el-form-item>的時(shí)候就會(huì)出現(xiàn) prop不知道如何去綁定或者在自定義驗(yàn)證規(guī)則的時(shí)候validator表達(dá)式里面的回調(diào)函數(shù)參數(shù)value值一直為undefined的情況。

查了好久資料終于找到原因所在，下面寫(xiě)出來(lái)給大家參考：

1、動(dòng)態(tài)prop內(nèi)綁定的屬性是要和form內(nèi)定義的屬性名以及model綁定的值要對(duì)應(yīng)上
2、prop內(nèi)綁定的屬性值需要把第一層循環(huán)時(shí)的父元素key值一并寫(xiě)上一直寫(xiě)到input內(nèi)綁定的model值，否則會(huì)出現(xiàn)上面的問(wèn)題

例子：
vue文件代碼太多，截圖看比較直觀

image.png

data里面的自定義驗(yàn)證規(guī)則：

  Vue({
            data(){
              return{
                // 自定義校驗(yàn)規(guī)則
                checkMessage: (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('請(qǐng)輸入郵箱'));
                    } else {
                        callback();
                    }
                },
                 form:{
                   details:[
                     {
                        memberSource: "1",
                        comment: "司機(jī)老大",
                        ccsNotifyDetails:[
                            {
                              notifyType: "1",
                              targetStr: "1******2"
                            },
                            {
                              notifyType: "1",
                              targetStr: "1******2"
                            }
            
                          ]
                     },
                     {
                        memberSource: "1",
                        comment: "司機(jī)老大",
                        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時(shí)， details是第一層循環(huán)，必須寫(xiě)上，然后一層一層的一直寫(xiě)到 
//與input綁定的v-mode的值為止，否則會(huì)出現(xiàn)驗(yàn)證規(guī)則的回調(diào)函數(shù)參數(shù) value取不到值的問(wèn)題
                                                  :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>

如果覺(jué)得這樣綁定prop麻煩，還有一種就是完全自定義驗(yàn)證規(guī)則，自己傳參數(shù)

html

<el-form-item prop="testRules" :rules="testRules('自己傳參', param1，param2)" >
            <el-input
              v-model.trim="test"
              placeholder="請(qǐng)輸入"
        />
    </el-form-item>

JS

//可以直接放在data里面
testRules: (data，param1，param2) => {
   return [
      {
//在這里 value值是取不到的，只能使用自己傳參的data的值
            validator:(rule, value, callback) => {
                if(!data){
                //驗(yàn)證不通過(guò)
                callback(new Error('！表單驗(yàn)證'));  
                }   
                //驗(yàn)證通過(guò)
                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 時(shí)間日期選擇器 pickerOptions參數(shù)支持自定義傳參

<div class="item spec" v-else>
    <div style="text-align: center;font-weight: 600;    margin-top: 20px;">
      出發(fā)
    </div>
    <el-form-item label="出發(fā)時(shí)間：" :verify="['NotNull']"
      :prop="'travelInfos.' + index + '.evectionInfo[0].startTime'">
      <el-date-picker v-model="item.evectionInfo[0].startTime" type="date" placeholder="選擇日期"
        value-format="yyyy-MM-dd" @change="val => {subsidyCount(val, index);}" :picker-options="pickerOptions0(index,0)">
      </el-date-picker>
    </el-form-item>
    <el-form-item label="到達(dá)時(shí)間：" :verify="['NotNull']"
      :prop="'travelInfos.' + index + '.evectionInfo[0].endTime'">
      <el-date-picker v-model="item.evectionInfo[0].endTime" type="date" placeholder="選擇日期"
        value-format="yyyy-MM-dd" :picker-options="pickerOptions1(index,0)">
      </el-date-picker>
    </el-form-item>
 </div>
 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;
          }
        }
      }
    },
}