码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-10-19 22:38:52      阅读:26      评论:0      收藏:0      [点我收藏+]

标签:数组   出现   back   llb   number   替换   temp   sch   rgba   

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

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

标签:数组   出现   back   llb   number   替换   temp   sch   rgba   

原文地址:https://www.cnblogs.com/zhu-xl/p/13839860.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!