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

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

 

注意:<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.rhkb.cn/news/413639.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Datawhale X 李宏毅苹果书 AI夏令营 入门 Task2-了解线性模型

目录 线性模型分段线性曲线模型变形 线性模型 输入的特征 x 乘上一个权重&#xff0c;再加上一个偏置就得到预测的结果&#xff0c;这样的模型称为线性模型。 分段线性曲线 线性模型有很大的限制&#xff0c;这一种来自于模型的限制称为模型的偏差&#xff0c;无法模拟真实的…

Bluetooth: att protocol

一篇搞懂 ATT 支持的东西都有什么。 READ_BY_GROUP_TYPE_REQ/RSP 如下是 Spec 内容&#xff1a; The attributes returned shall be the attributes with the lowest handles within the handle range. These are known as the requested attributes.If the attributes with th…

零知识证明-基础数学(二)

零知识证明(Zero—Knowledge Proof)&#xff0c;是指一种密码学工具&#xff0c;允许互不信任的通信双方之间证明某个命题的有效性&#xff0c;同时不泄露任何额外信息 导数、偏导数 ,互质数&#xff0c;费马小定理&#xff0c;欧拉定理 1 导数 导数是微积分学中的重要概念&am…

科研绘图系列:R语言组合图形绘图

介绍 柱状图、箱线图和棒棒图组合 加载R包 # Library library(ggplot2) library(dplyr) library(forcats)读取数据 data <- data.frame(name=c("north","south","south-east","north-west","south-west","north…

jquery下载的例子如何应用到vue中

参考测试圈相亲平台开发流程&#xff08;4&#xff09;&#xff1a;选个漂亮的首页 (qq.com) 下载的文件夹解压到v_love项目的pubilc下的static文件夹内&#xff0c;这里放的都是我们的静态资源。 打开文件夹内的index.html&#xff0c;我们先确定下它是不是我们要的东西&…

基于yolov10的PCB检测算法研究

内容&#xff1a;项目将YOLOV10创新后的PCB检测算法成功部署到GD32H757上&#xff0c;实现PCB缺陷的工业产线实时检测。 项目主要支持开源代码&#xff1a;HomiKetalys/gd32ai-modelzoo: Provide deployable deep learning models on gd32 (github.com) &#xff08;想了解将…

信息打点-红队工具篇FofaQuakeKunyuSuize水泽Arl灯塔

知识点&#xff1a; 1、网络空间四大引擎-Fofa&Quake&Shodan&Zoomeye 2、自动化信息收集项目-ARL灯塔&Suize水泽&Kunyu坤舆 3、单点功能信息收集项目-企查&子域名&指纹识别&社工信息 黑暗引擎&#xff1a; https://fofa.info https://qua…

GPT-4 vs LLaMA3.1:核心技术架构与应用场景对比

目录 前言 一、GPT-4 的核心技术架构 1.1 Transformer 结构概述 1.2 GPT-4 的主要组成部分 1.3 GPT-4 的创新与改进 二、LLaMA3.1 的核心技术架构 2.1 模型概述 2.2 LLaMA3.1 的主要组成部分 2.3 LLaMA3.1 的创新与改进 三、GPT-4 和 LLaMA3.1 的主要差异 3.1 模型规…

Native开发与逆向第五篇 - hook log打印

开发demo 新建native项目&#xff0c;实现log打印字符串。 下载地址&#xff1a;https://download.csdn.net/download/u013170888/89698015 #include <android/log.h> #define LOGI(...) __android_log_print(ANDROID_LOG_INFO, "JNI_LOG", __VA_ARGS__)exte…

WireShark网络分析~部署方式

一、《Wireshark网络分析就这么简单》 第一章学习 声明&#xff1a;文章只限于网络学习和实验&#xff0c;请遵守《网络安全法》。 第一章问题一&#xff1a;两台服务器A和B的网络配置如下(见图1)&#xff0c;B的子网掩码本应该是255.255.255.0&#xff0c;被不小心配成了255.…

深入解析C#中的锁机制:`lock(this)`、`lock(privateObj)`与`lock(staticObj)`的区别

前言 在C#的多线程编程中&#xff0c;lock关键字是确保线程安全的重要工具。它通过锁定特定的对象&#xff0c;防止多个线程同时访问同一块代码&#xff0c;从而避免数据竞争和资源冲突。然而&#xff0c;选择适当的锁对象对于实现高效的线程同步至关重要。本文将深入探讨使用…

无人机之电池篇

无人机电池作为无人机的重要组成部分&#xff0c;其性能、使用、保养及选择都至关重要。以下是对无人机电池的综合介绍&#xff1a; 一、无人机电池的基本参数 电池容量&#xff1a;电池容量直接影响无人机的续航能力。大容量电池&#xff0c;如5000mAh的电池&#xff0c;能提…

Python模块内容总结

参考&#xff1a; Python 模块 | 菜鸟教程 (runoob.com) Python 模块(Module)&#xff0c;是一个 Python 文件&#xff0c;以 .py 结尾&#xff0c;包含了 Python 对象定义和Python语句。 模块让你能够有逻辑地组织你的 Python 代码段。 把相关的代码分配到一个模块里能让你的代…

「OC」初识MVC —— 简单学习UITableView的解耦

「OC」初识MVC —— 简单学习UITableView的解耦 文章目录 「OC」初识MVC —— 简单学习UITableView的解耦写在前面认识MVC解耦数据源代理 创建cell的基础类创建section的相关类分离数据源分离代理总结参考资料 写在前面 最近在学习了解MVC&#xff0c;然后开始发现&#xff0c…

搭建数据库启前后端环境

1、 安装postgre&#xff0c;修改pg_hba.conf文件 2、安装dbeaer 3、任务管理器-服务&#xff1a;查看是否启动postgresql-x64-11 4、连接测试&#xff1a;新建数据库连接 http://127.0.0.1:14269/browser/# pgAdmin等于dbeaver 5、创建数据库&#xff1a; 6、启动后端…

【读书笔记-《30天自制操作系统》-12】Day13

本篇的内容仍然是定时器的相关讲解。上一篇内容中对于中断程序做了许多优化&#xff0c;但是这些优化到底起了多少作用呢&#xff1f;本篇用一种测试方法来进行测试。然后本篇继续引入链表与哨兵的概念&#xff0c;进一步加快超时的中断处理。 1. 主程序简化 开发过程到了这…

反向迭代器:reverse_iterator的实现

目录 前言 特点 注意事项 实现 构造函数 功能函数 在list与vector中的使用 vector list 前言 反向迭代器是一种在序列容器的末尾开始&#xff0c;并向前移动至序列开始处的迭代器。在C中&#xff0c;反向迭代器由标准库中的容器类提供&#xff0c;比如vector、list、d…

问题记录之Qt Creator下qDebug中文乱码

前言 环境如下 Windows11Qt5.14.2 MingWQt Creator 4.11.1 现象如下,调试模式下qDebug输出中文乱码 运行模式下&#xff0c;qDebug输出中文正常显示 解决记录 第一步 升级Qt Creator&#xff0c;由Qt Creator 4.11.1升级为Qt Creator 13.0.2 &#xff0c;此时效果如下…

【深入理解SpringCloud微服务】深入理解微服务配置中心原理,并手写一个微服务配置中心

【深入理解SpringCloud微服务】深入理解微服务配置中心原理&#xff0c;并手写一个微服务配置中心 为什么要使用配置中心配置中心原理如何手写一个配置中心使用PropertySourceLocator监听配置变更&#xff0c;刷新配置 实现一个微服务配置中心服务端库表ConfigCenterController…

Redis从入门再再到入门(下)

文章目录 1.Redis远程连接1.1 Redis远程连接配置1.2 通过桌面版图形化界面连接Redis1.3 通过IDEA中的插件连接Redis 2.Jedis的基本使用2.1 jedis概述2.2 jedis的基本操作2.3 jedis连接池 3.Spring整合Redis3.1 新建maven工程,引入相关依赖3.2 redis.properties3.3 spring-redis…