当前位置: 首页 > news >正文

vue+element多层表单校验prop和rules

核心点:外层循环是item和index,内层循环是item2和index2

如果都是定义的同一个属性名
外层循环得写:prop="'block.'+index+'.numerical'"
同理内层循环就得写:prop="'objectSpecs.'+ index2 + '.numerical'"

校验函数方法 :rules="getRules(item2, item2.name)"

<div class="block" v-for="(item, index) in block" :key="index"><el-form ref="blockForm" :model="item" :rules="formBlockRule" :inline="true"><el-form-item>多个formItem...省略一下</el-form-item><div v-for="(item2,index2) in item.objectSpecs" :key="index2"><!--输入框--><el-form-item v-if="item2.input" :prop="'objectSpecs.' + index2 + '.numerical'" :label="item2.name" label-width="130px" :rules="getRules(item2, item2.name)"><el-input :placeholder="item2.placeholder" v-model="item2.numerical" :onkeyup="numberFormate(item2, 'numerical')" :disabled="readOnly"></el-input></el-form-item><el-form-item v-if="item2.input"><span>{{item2.units}}</span></el-form-item><!--选择框--><el-form-item v-if="!item2.input" :prop="'objectSpecs.' + index2 + '.numerical'" :label="item2.name" label-width="130px" :rules="getRules(item2, item2.name)"><el-select v-model="item2.numerical" placeholder="请选择" :disabled="readOnly"><el-option v-for="(key,value) in item2.numericalList" :key="value" :label="key" :value="value"></el-option></el-select></el-form-item></div></el-form>
</div>
getRules(item, name) {if(item.input){return [{ required: true, message: '请输入' + name, trigger: 'blur' },]}else{return [{ required: true, message: '请选择' + name, trigger: 'change' }];}
}

相关文章:

vue+element多层表单校验prop和rules

核心点&#xff1a;外层循环是item和index&#xff0c;内层循环是item2和index2 如果都是定义的同一个属性名 外层循环得写:prop"block.index.numerical" 同理内层循环就得写:prop"objectSpecs. index2 .numerical" 校验函数方法 :rules"getRules(it…...

Dubbo 核心概念和架构

以上是 Dubbo 的工作原理图&#xff0c;从抽象架构上分为两层&#xff1a;服务治理抽象控制面 和 Dubbo 数据面 。 服务治理控制面。服务治理控制面不是特指如注册中心类的单个具体组件&#xff0c;而是对 Dubbo 治理体系的抽象表达。控制面包含协调服务发现的注册中心、流量管…...

【数据结构OJ题】反转链表

原题链接&#xff1a;https://leetcode.cn/problems/reverse-linked-list/description/ 目录 1. 题目描述 2. 思路分析 3. 代码实现 1. 题目描述 2. 思路分析 方法一&#xff1a;三指针翻转法 使用三个结构体指针n1&#xff0c;n2&#xff0c;n3&#xff0c;原地修改结点…...

Java8 Stream 之groupingBy 分组讲解

本文主要讲解&#xff1a;Java 8 Stream之Collectors.groupingBy()分组示例 Collectors.groupingBy() 分组之常见用法 功能代码: /** * 使用java8 stream groupingBy操作,按城市分组list */ public void groupingByCity() { Map<String, List<Em…...

优哲SSD大文件写性能测试

SDD磁盘性能测试&#xff1a; 空盘&#xff1a; 大文件读&#xff0c;写&#xff0c;读写&#xff08;4/6&#xff09;性能测试&#xff0c;删除性能测试&#xff0c;N进程&#xff0c;N线程 小文件读&#xff0c;写&#xff0c;读写&#xff08;4/6&#xff09;性能测试&am…...

Python基础教程: json序列化详细用法介绍

前言 嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 Python内置的json模块提供了非常完善的对象到JSON格式的转换。 废话不多说&#xff0c;我们先看看如何把Python对象变成一个JSON&#xff1a; d dict(nameKaven, age17, sexMale) print(json.dumps(d)) # {"na…...

一张图看懂 USDT三种类型地址 Omni、ERC20、TRC20的区别

USDT是当前实用最广泛&#xff0c;市值最高的稳定币&#xff0c;它是中心化的公司Tether发行的。在今年的4月17日之前&#xff0c;市场上存在着2种不同类型的USDT。4月17日又多了一种波场TRC20协议发行的USDT&#xff0c;它们各自有什么区别呢?哪个转账最快到账&#xff1f;哪…...

SegFormer之模型训练

单卡训练&#xff0c;所有配置文件里的【SyncBN】改为【BN】 启动训练 &#xff08;1&#xff09;终端直接运行 python tools/train.py local_configs/segformer/B1/segformer.b1.512x512.ade.160k.py &#xff08;2&#xff09;在编辑器中运行 在 [config] 前面加上’–‘将…...

Azure资源命名和标记决策指南

参考 azure创建虚拟机在虚拟机中选择编辑标签&#xff0c;并添加标记&#xff0c;点击应用 3.到主页中转到所有资源 4. 添加筛选器并应用 5.查看结果&#xff0c;筛选根据给服务器定义的标签筛选出结果。 参考链接: https://learn.microsoft.com/zh-cn/azure/cloud-adoption…...

【在一个升序数组中插入一个数仍升序输出】

在一个升序数组中插入一个数仍升序输出 题目举例&#xff1a; 有一个升序数组nums&#xff0c;给一个数字data&#xff0c;将data插入数组nums中仍旧保证nums升序&#xff0c;返回数组中有效元素个数。 比如&#xff1a;nums[100] {1, 2, 3, 5, 6, 7, 8, 9} size 8 data 4 …...

图像去雨、去雪、去雾论文学习记录

All_in_One_Bad_Weather_Removal_Using_Architectural_Search 这篇论文发表于CVPR2020&#xff0c;提出一种可以应对多种恶劣天气的去噪模型&#xff0c;可以同时进行去雨、去雪、去雾操作。但该部分代码似乎没有开源。 提出的问题&#xff1a; 当下的模型只能针对一种恶劣天气…...

YARN框架和其工作原理流程介绍

目录 一、YARN简介 二、YARN的由来 三、YARN的基本设计思想 四、YARN 的基本架构 4.1 基本架构图 4.2 基本组件介绍 4.2.1 ResourceManager 4.2.1.1 任务调度器(Resource Scheduler) 4.2.1.2 应用程序管理器&#xff08;Applications Manager&#xff09; 4.2.1.3 其他…...

多维时序 | MATLAB实现ZOA-CNN-BiGRU-Attention多变量时间序列预测

多维时序 | MATLAB实现ZOA-CNN-BiGRU-Attention多变量时间序列预测 目录 多维时序 | MATLAB实现ZOA-CNN-BiGRU-Attention多变量时间序列预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 1.Matlab基于ZOA-CNN-BiGRU-Attention斑马优化卷积双向门控循环单元网络…...

centos上下载redis

1.redis 特点 Redis特性&#xff08;8个&#xff09; 1 速度快&#xff1a;10w ops&#xff08;每秒10w读写&#xff09;&#xff0c;数据存在内存中&#xff0c;c语言实现&#xff0c;单线程模型 2 持久化&#xff1a;rdb和aof 3 多种数据结构&#xff1a; 5大数据结构 …...

黑马项目一阶段面试58题 Web14题(二)

八、内连接和外连接查询有什么区别 内连接 获取两表的交集部分 外连接 获取某表的所有数据&#xff0c;以及两表的交集数据 九、事务管理的作用&#xff0c;四大特性 作用 保证多个增删改的操作&#xff0c;要么同时成功&#xff0c;要么同时失败 四大特性 1.原子性 事…...

软考高项-思维导图34-36(计算机高级系统项目管理师)

陆续更新一些软考高项的思维导图&#xff0c;都是一些必背知识点&#xff0c;希望可以帮助大家早日考过高项&#xff0c;早日当上高工&#xff0c;早日成为杭州E类人才。全部完整导图快速获取链接&#xff1a;计算机高级系统项目管理师-思维导图汇总 三十四、需求按层次分 三十…...

C++的stack和queue+优先队列

文章目录 什么是容器适配器底层逻辑为什么选择deque作为stack和queue的底层默认容器优先队列优先队列的模拟实现stack和queue的模拟实现 什么是容器适配器 适配器是一种设计模式(设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总 结)&#xff0c;…...

Ubuntu 18.04.6 Android Studio Giraffe adb logcat 无法使用

在 Ubuntu 18.04.6 上 在链接上设备以后&#xff0c;发现可以用 Android Studio 安装应用 但无法用 Android Studio 看 logcat 手动从命令行停止&#xff0c;启动 adb 会报错如下: daemon not running. starting it now on port 5037 ADB server didnt ACK fail…...

Python采集天气数据,做可视化分析【附源码】

嗨害大家好鸭&#xff01;我是小熊猫~ 毕业设计大家着急吗&#xff1f; 没事&#xff0c;我来替大家着急 源码、素材python永久安装包:点击此处跳转文末名片获取 本文知识点: 动态数据抓包 requests发送请求 结构化非结构化数据解析 开发环境: python 3.8 运行代码 pycharm 2…...

优维低代码实践:自定义模板

优维低代码技术专栏&#xff0c;是一个全新的、技术为主的专栏&#xff0c;由优维技术委员会成员执笔&#xff0c;基于优维7年低代码技术研发及运维成果&#xff0c;主要介绍低代码相关的技术原理及架构逻辑&#xff0c;目的是给广大运维人提供一个技术交流与学习的平台。 优维…...

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…...

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理)

上一章用到了V2 的概念&#xff0c;其实 Fiori当中还有 V4&#xff0c;咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)&#xff0c;代理中间件&#xff08;ui5-middleware-simpleproxy&#xff09;-CSDN博客…...

[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.

ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #&#xff1a…...

PHP 8.5 即将发布:管道操作符、强力调试

前不久&#xff0c;PHP宣布了即将在 2025 年 11 月 20 日 正式发布的 PHP 8.5&#xff01;作为 PHP 语言的又一次重要迭代&#xff0c;PHP 8.5 承诺带来一系列旨在提升代码可读性、健壮性以及开发者效率的改进。而更令人兴奋的是&#xff0c;借助强大的本地开发环境 ServBay&am…...

【工具教程】多个条形码识别用条码内容对图片重命名,批量PDF条形码识别后用条码内容批量改名,使用教程及注意事项

一、条形码识别改名使用教程 打开软件并选择处理模式&#xff1a;打开软件后&#xff0c;根据要处理的文件类型&#xff0c;选择 “图片识别模式” 或 “PDF 识别模式”。如果是处理包含条形码的 PDF 文件&#xff0c;就选择 “PDF 识别模式”&#xff1b;若是处理图片文件&…...

使用ch340继电器完成随机断电测试

前言 如图所示是市面上常见的OTA压测继电器&#xff0c;通过ch340串口模块完成对继电器的分路控制&#xff0c;这里我编写了一个脚本方便对4路继电器的控制&#xff0c;可以设置开启时间&#xff0c;关闭时间&#xff0c;复位等功能 软件界面 在设备管理器查看串口号后&…...