ElementUI el-form表单多层数组的校验
问题描述
提示:这里描述项目中遇到的问题:
ElementUI el-form表单多层数组的校验
页面效果:

数据结构:
addform: {code: '',type: '',value: '',state: 1,remark: '',fieldList: [{fieldCode: '',resolverEntities: [{resolverType: '', resolverConfigOne: '', resolverConfigTwo: ''
}]}]}
HTML:
<el-form ref="addform" :rules="formRules" :model="addform" size="small"><el-form-item label="标识:" prop="code"><el-inputv-model="addform.code"placeholder="请输入"autocomplete="off"clearable/></el-form-item><el-row><el-col :span="8"><el-form-item label="类型:" prop="type"><el-select v-model="addform.type" placeholder="请选择"><el-optionv-for="item in typeOptions":key="item.code":label="item.name":value="item.code"></el-option></el-select></el-form-item></el-col><el-col :span="16"><el-form-item class="state-box" label="状态:" prop="state"><el-switchv-model="addform.state"active-color="#13ce66"inactive-color="#ff4949":active-value="1":inactive-value="2"></el-switch></el-form-item></el-col></el-row><div class="custom-rule-box"><p>自定义解码字段</p><ul><liv-for="(customRuleItem, customRuleIndex) in addform.fieldList":key="customRuleIndex"><el-form-itemclass="field-name"label="字段名:":prop="`fieldList.${customRuleIndex}.fieldCode`":rules="formRules.fieldCode"><el-inputv-model="addform.fieldList[customRuleIndex].fieldCode"placeholder="请输入"autocomplete="off"clearable/></el-form-item><divclass="decode-rule-list"v-for="(decodeRuleItem, decodeRuleIndex) in customRuleItem.resolverEntities":key="decodeRuleIndex"><el-row :gutter="24"><el-col :span="5"><el-form-itemlabel="":prop="`fieldList.${customRuleIndex}.resolverEntities.${decodeRuleIndex}.resolverType`":rules="formRules.resolverType"><el-selectv-model="decodeRuleItem.resolverType"placeholder="请选择"><el-optionv-for="item in decodeRuleOptions":key="item.code":label="item.name":value="item.code"></el-option></el-select></el-form-item></el-col><template v-if="decodeRuleItem.resolverType"><el-col :span="8"><el-form-item:label="computedResolverConfigOneLabel(decodeRuleItem.resolverType)":prop="`fieldList.${customRuleIndex}.resolverEntities.${decodeRuleIndex}.resolverConfigOne`":rules="formRules.resolverConfigOne"><el-inputv-model="decodeRuleItem.resolverConfigOne"placeholder="请输入"autocomplete="off"clearable/></el-form-item></el-col><el-col :span="8"><el-form-item:label="computedResolverConfigTwoLabel(decodeRuleItem.resolverType)":prop="`fieldList.${customRuleIndex}.resolverEntities.${decodeRuleIndex}.resolverConfigTwo`":rules="formRules.resolverConfigTwo"><el-inputv-model="decodeRuleItem.resolverConfigTwo"placeholder="请输入"autocomplete="off"clearable/></el-form-item></el-col></template><el-col :span="3" class="decode-rule-operate"><imgv-if="customRuleItem.resolverEntities.length > 1"src="@/assets/images/common/delete.png"alt=""class="deleteImg"@click="handleDeleteResolver(customRuleIndex, decodeRuleIndex)"/><imgsrc="@/assets/images/common/add.png"alt=""class="addImg"@click="handleAddResolver(customRuleIndex, decodeRuleIndex)"/></el-col></el-row></div></li></ul><div class="add-btn"><imgsrc="@/assets/images/common/add.png"alt=""class="deleteImg"@click="handleAddField"/>新增</div></div></el-form>
总结:
重点在于 el-form-item 的 prop绑定,参考如下示例
:prop=“
fieldList.${customRuleIndex}.fieldCode”
:prop=“
fieldList.${customRuleIndex}.resolverEntities.${decodeRuleIndex}.resolverConfigOne”
相关文章:
ElementUI el-form表单多层数组的校验
问题描述 提示:这里描述项目中遇到的问题: ElementUI el-form表单多层数组的校验 页面效果: 数据结构: addform: {code: ,type: ,value: ,state: 1,remark: ,fieldList: [{fieldCode: ,resolverEntities: [{resolverType: , re…...
常见的向量范数、矩阵范数和对偶范数-对偶范数详细证明过程
文章目录 对偶范数一般定义: p p p-范数和 q q q-范数的对偶性特例 1:无穷范数和 1 范数的对偶性特例 2:2 范数的对偶是自身特例 3:有限范数与 0 范数的对偶关系(稀疏性)特例 4:核范数ÿ…...
Android 滴滴面经
Android 滴滴面经 文章目录 Android 滴滴面经一面二面三面 一面 Activity的启动的四种模式,四种启动模式的应用场景,单例模式的启动场景,我回答的是闹钟,反问:在单例模式下闹钟运行时点击back键,是回退到闹…...
angular登录按钮输入框监听
说明:angular实现简单的登录页面,监听输入框的值,打印出来,按钮监听,打印数据 效果图: step1:E:\projectgood\ajnine\untitled4\src\app\app.config.ts import { ApplicationConfig, provideZoneChangeDetection } …...
硅谷甄选(10)用户管理
用户管理模块 9.1 静态搭建 主要是el-form、el-pagination <template><el-card style"height: 80px"><el-form :inline"true" class"form"><el-form-item label"用户名:"><el-input placeholder"请…...
Unity XR Interaction Toolkit 开发教程(2):导入 SDK【3.0 以上版本】
文章目录 📕课程总结📕安装 Unity 编辑器与打包模块📕导入 OpenXR📕导入 XR Interaction Toolkit📕打包发布 获取完整课程以及答疑,工程文件下载: https://www.spatialxr.tech/ 视频试看链接&a…...
element-plus校验单个form对象合法性
在 Vue 中,循环生成的表单列表,并且每个表单中包含多个对象,使用 v-for 来创建这些表单,并且使用动态 prop 路径来验证单个对象是否满足必填校验。 <template><el-form ref"formRef" :model"form" …...
Linux常见命令合集
目录 1.ls 列出指定目录下的文件和和文件夹 2.cd change directory 切换目录 3. cat 查看文件 4.more 分屏查看文件 5.tail从后往前查看指定文件 6.mkdir 创建目录 7.rm强制删除指定目录和文件 8.cp复制文件和目录 9.mv移动和重命名命令 10.tar命令打包和拆包 重点是…...
__init__.py __all__和 __name__的作用及其用法
__ init__.py 的作用及其用法: 包下的__init__.py 所在目录是一个模块包,本身也是一个模块,可用于定义模糊导入时要导入的内容。当我们导入一个包的时候,包下的__init__.py中的代码会自动执行,因此在某些大的项目被使用频率较高的模块&#x…...
js操作数组的方法 / js操作字符串的方法
操纵数组的方法 常见的有10种 push() -在数组末尾添加一个或多个元素,并返回新的长度。 pop() -删除数组的最后一个元素,并返回那个元素。 shift() -删除数组的第一个元素,并返回那个元素。 unshift() -在数组的开始添加一个或多个元素&…...
Docker 部署RocketMQ
FROM: Docker安装RocketMQ教程_docker 安装rocketmq-CSDN博客...
Linux(Cent OS)环境离线安装mkfontscale mkfontdir命令 解决java项目在linux系统下无法获取中文字体问题
https://download.csdn.net/download/mlc19860417/89938093 1 附件下载 1.libfontenc-1.1.3-3.amzn2.0.2.x86_64.rpm 2.libXfont-1.5.2-1.amzn2.0.2.x86_64.rpm 3.xorg-x11-font-utils-7.5-20.amzn2.0.2.x86_64.rpm 4.fontpackages-filesystem-1.44-8.amzn2.noarch.rpm 5.sti…...
计算堆栈中的剩余数字
更多关于刷题的内容欢迎订阅我的专栏华为刷题笔记 该专栏题目包含两部分: 100 分值部分题目 200 分值部分题目 所有题目都会陆续更新,订阅防丢失 题目描述: 向一个空栈中依次存入正整数, 假设入栈元素 n ( 1 < n < 2…...
笔记:mysql升级 5.6至5.7
说明 一台已有数据的机器,停机升级,从MySQL Server5.6.48,升级到 5.7.38。 环境介绍 10.24.10.247,Mysql 5.6.48 CentOS Linux release 7.9.2009 (Core) 32G内存、500G数据盘/home; 实际数据量约120M,2个…...
前端的全栈Deno篇(五):与前端保持一致的模块化方案,摆脱ERR_REQUIRE_ESM和mjs、cjs等模块混乱带来的心智负担
在现代JavaScript开发中,模块化系统的演变经历了多次变革,使得前端和后端开发人员在选择模块加载方式时常常感到困惑。尤其是Node.js所采用的CommonJS和ESM(ECMAScript Modules)两种模块体系,以及文件扩展名的多样性&a…...
与外部公司做数据交互时,需要注意哪些事情?
在现代企业系统中,数据交互已成为日常业务流程的核心部分。与外部公司进行数据交换可以带来业务合作和资源共享的机会,但也带来了数据安全、协议兼容性、合规性等方面的挑战。本文将深入探讨在与外部公司进行数据交互时需要关注的关键事项,并…...
基于hive分析Flask为后端框架echarts为前端框架的招聘网站可视化大屏项目
基于hive分析Flask为后端框架echarts为前端框架的招聘网站可视化大屏项目 1. 项目概述 项目目标是构建一个大数据分析系统,包含以下核心模块: 1、数据爬取:通过request请求获取猎聘网的就业数据。 2、数据存储和分析:使用 Hive …...
Ansible 部署应用
Ansible Ansible 是基于 Python 开发,集合了众多优秀运维工具的优点,实现了批量运行命令、部署程序、配置系统等功能的自动化运维管理工具。默认通过 SSH 协议进行远程命令执行或下发配置,无需部署任何客户端代理软件,从而使得自动…...
使用Docker Swarm进行集群管理
💓 博客主页:瑕疵的CSDN主页 📝 Gitee主页:瑕疵的gitee主页 ⏩ 文章专栏:《热点资讯》 使用Docker Swarm进行集群管理 Docker Swarm简介 安装Docker 在Ubuntu上安装Docker 在CentOS上安装Docker 在macOS上安装Docker …...
基于树莓派的安保巡逻机器人--(一、快速人脸录入与精准人脸识别)
目录 零、前言 一、人脸检测 二、人脸识别 1、采集人脸 2、训练人脸识别模型 3、人脸识别应用 零、前言 随着智能安防需求的增长,基于人工智能和物联网的安保系统逐渐成为趋势。树莓派因其低成本、高扩展性等特点,成为很多AI项目的理想平台。本文将为大…...
地震勘探——干扰波识别、井中地震时距曲线特点
目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波:可以用来解决所提出的地质任务的波;干扰波:所有妨碍辨认、追踪有效波的其他波。 地震勘探中,有效波和干扰波是相对的。例如,在反射波…...
基于FPGA的PID算法学习———实现PID比例控制算法
基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容:参考网站: PID算法控制 PID即:Proportional(比例)、Integral(积分&…...
ubuntu搭建nfs服务centos挂载访问
在Ubuntu上设置NFS服务器 在Ubuntu上,你可以使用apt包管理器来安装NFS服务器。打开终端并运行: sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享,例如/shared: sudo mkdir /shared sud…...
【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器
一.自适应梯度算法Adagrad概述 Adagrad(Adaptive Gradient Algorithm)是一种自适应学习率的优化算法,由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率,适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...
STM32+rt-thread判断是否联网
一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...
Linux简单的操作
ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...
【项目实战】通过多模态+LangGraph实现PPT生成助手
PPT自动生成系统 基于LangGraph的PPT自动生成系统,可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析:自动解析Markdown文档结构PPT模板分析:分析PPT模板的布局和风格智能布局决策:匹配内容与合适的PPT布局自动…...
【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具
第2章 虚拟机性能监控,故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令:jps [options] [hostid] 功能:本地虚拟机进程显示进程ID(与ps相同),可同时显示主类&#x…...
全志A40i android7.1 调试信息打印串口由uart0改为uart3
一,概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本:2014.07; Kernel版本:Linux-3.10; 二,Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01),并让boo…...
Angular微前端架构:Module Federation + ngx-build-plus (Webpack)
以下是一个完整的 Angular 微前端示例,其中使用的是 Module Federation 和 npx-build-plus 实现了主应用(Shell)与子应用(Remote)的集成。 🛠️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...
