element UI -- 表格内自定义表单校验Value 值只获取上一次的值 解决方案

Posted 2020-12-20 zhu-xl

在表单包括表格页面校验情况下 对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 的情况。希望能帮助到大家。