欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 新闻 > 焦点 > 动态校验列表数据方案

动态校验列表数据方案

2024/11/30 6:28:19 来源:https://blog.csdn.net/weixin_45379180/article/details/140186850  浏览:    关键词:动态校验列表数据方案

背景:当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:falsethis.validRulesList.warrantyManualUpload[0].required = (id.value === 'a')?true:falseif(id.value === 'a') {this.validRulesList.warrantyManualDescr[0].required = trueconst $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 = trueconst $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
}

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com