动态校验列表数据方案

背景:当select 选择A 的时候是必填,选B的时候是非必填

那么我们需要监听 selec 变化时候对 列表的 :edit-rules="validRulesList" 进行重新赋值必填校验的true, (跟对列表内上传文件,对列表文件进行赋值名字一样道理,通过获取对应的校验值,或者列表对应的字段进行赋值)

Rules列表

复制代码
validRules: {
warrantyManualDescr:[{ required: false, message: this.$t('test') }],
warrantyManualUpload:[{ required: false, message: this.$t('test') }],
 }

通过获取对应的校验值进行赋值,注意在改变的时候,会因为列表是数组,最下面的值的改变会影响到其他数据的必填值,所以需要else 对整个表进行查询处理,查到就 return 节约时间

复制代码
async ptypeChangeEvent (row, id) {
 this.validRulesList.warrantyManualDescr[0].required = (id.value === 'a')?true:false
 this.validRulesList.warrantyManualUpload[0].required = (id.value === 'a')?true:false
 if(id.value === 'a') {
     this.validRulesList.warrantyManualDescr[0].required = true
     const $table = this.$refs.sublistTableData;
     const errMap = await $table.validate(true)
 }else {
   for(let i=0; i<this.sublistTableData.length; i++) {
       let e = this.sublistTableData[i]
       if(e.warrantyManualNorm == 'UNSWD') {
           this.validRulesList.warrantyManualDescr[0].required = true
           const $table = this.$refs.sublistTableData;
           const errMap = await $table.validate(row.row)
           return
       }
   }
 }
},

提交 submit 按钮的时候操作

对存在 必填字段的值查到 就 return 防止循环到下一个不是必填的字段(注意我们是在列表中进行判断,循环不做 return 会 继续到最后,出现 校验弹框 又被覆盖的情况)

通过对是否存在要校验的列表进行收集,对以后的计算进行拦截

复制代码
/*字表校验操作*/
const $table = this.$refs.sublistTableData;
let arr = []
for(let i=0; i<this.sublistTableData.length; i++) {
    let e = this.sublistTableData[i]
    if(e.warrantyManualNorm == 'a') {
        const errMap = await $table.validate(e)
        if(errMap) {
          arr.push(errMap)
          return
        }
    }
}
if(arr.length>0) {
    return false
}
相关推荐
花花鱼3 小时前
android studio 设置让开发更加的方便,比如可以查看变量的类型,参数的名称等等
android·ide·android studio
互联网搬砖老肖3 小时前
运维打铁: MongoDB 数据库集群搭建与管理
运维·数据库·mongodb
典学长编程3 小时前
数据库Oracle从入门到精通!第四天(并发、锁、视图)
数据库·oracle
alexhilton4 小时前
为什么你的App总是忘记所有事情
android·kotlin·android jetpack
积跬步,慕至千里4 小时前
clickhouse数据库表和doris数据库表迁移starrocks数据库时建表注意事项总结
数据库·clickhouse
极限实验室5 小时前
搭建持久化的 INFINI Console 与 Easysearch 容器环境
数据库
白仑色5 小时前
Oracle PL/SQL 编程基础详解(从块结构到游标操作)
数据库·oracle·数据库开发·存储过程·plsql编程
程序猿小D6 小时前
[附源码+数据库+毕业论文]基于Spring+MyBatis+MySQL+Maven+jsp实现的个人财务管理系统,推荐!
java·数据库·mysql·spring·毕业论文·ssm框架·个人财务管理系统
钢铁男儿7 小时前
C# 接口(什么是接口)
java·数据库·c#
AirDroid_cn7 小时前
OPPO手机怎样被其他手机远程控制?两台OPPO手机如何相互远程控制?
android·windows·ios·智能手机·iphone·远程工作·远程控制