element UI -- 表格內自定義表單校驗Value 值只獲取上一次的值 解決方案

在表單包括表格頁面校驗情況下 對input框的值進行必填校驗和格式校驗時，會遇到value值 只能拿到第一次獲取的到校驗值。這樣后面每次輸入都是按照第一次情況進行校驗。由此我的經驗是在自定義校驗時 用具體值進行校驗 如下方式：

  usedTime(rule, value, callback){
            console.log(rule)
            let reg = /^[1-9]\d*$/;
            let index = Number(rule.field.split('.')[1])//獲取當前驗證項的index，對應數據的index
            console.log(this.ruleForm.rights[index].usedTime)
            if(this.ruleForm.rights[index].isChecked && !this.ruleForm.rights[index].usedTime){
                callback(new Error('該項為必填項'))
            }else if(this.ruleForm.rights[index].isChecked && reg.test(this.ruleForm.rights[index].usedTime) === false){
                callback(new Error('只能輸入大於等於1的正整數'))
            }else if(this.ruleForm.rights[index].usedTime > this.ruleForm.rights[index].remainNumber){
                callback(new Error('本次使用次數不可大於可用次數'))
            }else {
                callback()
            }
        },

在rules 里使用 如下：

  rules:{
                phone:[ required, phone ],
                verificationName: [  required ,
                    // chineseChar,
                    // {min:2,message: '至少輸入兩個字符', trigger: 'blur'}
                ],
                usedTime:[{required: true,validator:this.usedTime,trigger: ['blur','change']}, positiveIntNum],
                verificationOrgId:[required,requiredChange],
                costValue:[required, twoFloat,
                 {required:true,validator:this.costValueValid,trigger: ['blur','change']}
                ],
            },

頁面校驗實現方式：

<el-table-column prop="usedTime" label="本次使用次數" width="140">
       <!--   :prop="`rights.${scope.$index}.usedTime`" -->
        <template  slot-scope="scope">
        　　<el-form-item label=" "
                  v-show="scope.row.isChecked == true" 
                  :prop="'rights.'+scope.$index+'.usedTime'"
                  :rules="rules.usedTime"
                  class="costValue">
　　　　　　　　　　　<el-input style="margin:0;width:89%" type="text" v-model="scope.row.usedTime"></el-input>
            </el-form-item>
        </template>
</el-table-column>

 

以上方式 之前  this.ruleForm.rights[index].usedTime 都是用value值替換實現，發現上面描述的bug 之后 直接根據index值來精准取數組內相對應的要校驗的值就沒有出現校驗bug 的情況。希望能幫助到大家。