Ant Design vue 多层for循环form表单自定义校验

devtools/2024/10/21 9:46:29/

数据结构如下:三维数组。

 

注意:<a-form-model>一定得写在for外面!!!!

<!-- 弹出框 -->
<a-modal:title="title":dialog-style="{ top: '20px' }":visible="visible":confirmLoading="confirmLoading":width="1450"@ok="() => handleSubmit()"@cancel="() => handleCancel()"> <a-form-model ref="formRef" :model="model" class="dialogMaxHeight" :rules="rules">  <div v-for="(item, lIndx) in model.result" :key="item.id" v-show="curTabId === item.id"><div class="group-item"  v-for="(con, cIndx) in item.contentList" :key="con.id"><!-- 两层for写法--><div class="inner"> <a-row style="padding: 8px 0"> <a-col :span="12"><a-form-model-item label="自评分" :labelCol="labelCol" :wrapperCol="wrapperCol" :prop="'result.' + lIndx + '.contentList.' + cIndx + '.selfScore'":rules="[{ required: parseInt(item.typeId) == 2 ? true : false, validator: validateSelfScore, trigger: ['change', 'blur'] }]" > <a-input-number  :disabled="isDisabledAuth('selfScore')" placeholder="" :min="getMinScore(con.scoringStandard)" :max="getMaxScore(con.scoringStandard)" v-model="con.selfScore"  style="width: 10rem" /><span style="padding: 0 5px">分</span></a-form-model-item></a-col>  </a-row></div> <!-- 三层for写法--><div class="con"><a-row style="padding: 8px 0"> <a-col :span="12"><a-form-model-item label="自评分" :labelCol="labelCol" :wrapperCol="wrapperCol" :prop="'result.' + lIndx + '.contentList.' + cIndx + '.list.' + gIndex +  '.selfScore'":rules="[{ required: parseInt(item.id) === 2 ? true : false, validator: validateSelfScoreLev2, trigger: ['change', 'blur'] }]"   > <a-input-number :disabled="isDisabledAuth('selfScore')" placeholder="" :min="getMinScore(group.scoringStandard)" :max="getMaxScore(group.scoringStandard)" v-model="group.selfScore" style="width: 10rem" /><span style="padding: 0 5px">分</span></a-form-model-item></a-col>  </a-row></div> </div>  </div> 
</a-form-model>   
</a-modal>                       export default {
methods: { /* 原始未重构写法 和prop里数据结构一致  */validateSelfScore (rule, value, callback) {// 校验自评分const oneIndex = rule.field.split('.')[1]const twoIndex = rule.field.split('.')[3]const rowData = this.model.result[oneIndex].contentList[twoIndex]const rowData2 = this.model.result[oneIndex].contentList[twoIndex].list[threeIndex]if(!value && value === '' || value === null) {callback(new Error(`请输入${rowData.content ? rowData.content: ''}自评分!`))} else {callback()}}, // 重构后validateSelfScore (rule, value, callback) {// 校验自评分(仅一级信用)// const oneIndex = rule.field.split('.')[1]// const twoIndex = rule.field.split('.')[3]// const rowData = this.model.result[oneIndex].contentList[twoIndex]if(this.isDisabledAuth('selfScore') === false) { // 物业btn未禁用this.getValidRowCall(rule).then(res => {const rowData = this.model.result[res.oneIndex].contentList[res.twoIndex] // typeId诚信信息必校验if(parseInt(rowData.typeId) == 2) {if(!value && (value === '' || value === null)) {// if(rowData.content) this.$message.warning(`请输入${rowData.content ? rowData.content: ''}自评分!`)callback(new Error(`请输入${rowData.content ? rowData.content: ''}自评分!`))} else {callback()}    } else {callback()}})} else {callback()}},// 三维数组校验 和prop里数据结构一致threeIndex validateSelfScoreLev2 (rule, value, callback) {// 校验自评分(二级信用)// const rowData = this.model.result[oneIndex].contentList[twoIndex].list[threeIndex]if(this.isDisabledAuth('selfScore') === false) { // 物业btn未禁用this.getValidRowCall(rule).then(res => {const rowData = this.model.result[res.oneIndex].contentList[res.twoIndex].list[res.threeIndex]// typeId诚信信息必校验if(parseInt(rowData.typeId) == 2) {if(!value && (value === '' || value === null)) {callback(new Error(`请输入${rowData.content ? rowData.content: ''}自评分!`))} else {callback()}} else {callback()}})} else {callback()}},handleSubmit () { // form表单提交this.$refs.formRef.validate(valid => { if (valid) { this.$message.warning('验证通过。。。');    } else{this.$message.warning('验证未通过。。。');return false;}})},} 
}


http://www.ppmy.cn/devtools/103932.html

相关文章

系统开发压力测试高并发

目的&#xff1a; 压力测试软景见环境下的系统多能承受的最大负荷以及高访问量出现的并发带来的问题。压力测试能够帮助系统在线上稳定持续的运行&#xff0c;在一定范围内可以做到心中有数。 我们希望压力测试能够发现更多的错误。其中两种&#xff1a;并发同步问题、内存泄漏…

计算机网络: 第一章 概述_1

文章目录 1. 因特网概述1.1 网络、互联网与因特网的区别与关系1.2 因特网简介1.2.1 因特网发展的三个阶段1.2.2 因特网的组成 2. 电路交换 分组交换 报文交换2.1 电路交换2.2 分组交换2.3 报文交换2.4 三种交换方式的对比 3. 计算机网络的定义和分类3.1 计算机网络的定义3.2 计…

美国洛杉矶多ip服务器特点

美国洛杉矶多IP服务器因其丰富的IP资源、卓越的性能和灵活的配置&#xff0c;在多个行业如站群运营、SEO优化、游戏代理等方面发挥着重要作用。具体分析如下&#xff0c;rak小编为您整理发布美国洛杉矶多ip服务器的特点。 IP资源的丰富性 独立IP数量&#xff1a;美国洛杉矶多IP…

Linux C/C++ 库链接选项 --whole-archive,--no-whole-archive和--start-group, --end-group

库链接选项 一、介绍whole-archive编译选项Bstatic编译选项start-group 编译选项 示例参考链接 一、介绍 这四个都是链接器的选项&#xff0c;所以在编译的时候要用-Wl&#xff0c;[options]来传递给链接器&#xff0c;不然编译器会不认得这个选项。   在大型工程开发中&…

Nosql数据库redis集群配置详解

一、Redis的安装 环境介绍&#xff1a; 一主双从&#xff1a;10&#xff08;redis-node1&#xff09;主&#xff0c;20&#xff08;redis-node2&#xff09; 30&#xff08;redis-node3&#xff09;从——使用的是红帽9.1系统 源码安装redis [rootredis-node1 ~]# tar zxf red…

计算图像分割mask的灰度级个数、以及删除空的分割数据

1、查询mask类别 图像分割的mask是图片格式的话&#xff0c;往往是阈值图像&#xff0c;这样有几个阈值就是分割几个类别的 这里提供代码检测mask的类别个数 摆放如上&#xff08;只要有mask即可&#xff09;&#xff0c;然后copy下面代码&#xff0c;放在data的同级目录即可…

C#桌面开发之巅:Windows Forms与WPF深度解析

标题&#xff1a;C#桌面开发之巅&#xff1a;Windows Forms与WPF深度解析 摘要 C#作为.NET框架的核心语言之一&#xff0c;提供了强大的桌面应用程序开发能力。Windows Forms和WPF&#xff08;Windows Presentation Foundation&#xff09;是两个主要的UI框架&#xff0c;用于…

企业级Mysql 集群技术部署

目录 1.1部署mysql 1.1.1 安装依赖性&#xff1a; 1.1.2 下载并解压源码包 1.1.3 源码编译安装mysql 1.1.4 部署mysql 2.mysql的主从复制 2.1 配置masters 2.2配置slave 2.3 延迟复制 2.4 慢查询日志 2.5并行复制 2.6 原理刨析 2. 7架构缺陷 3.半同步模式 3.1半同…