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项目的理想平台。本文将为大…...
使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式
一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明:假设每台服务器已…...
Docker 运行 Kafka 带 SASL 认证教程
Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明:server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...
C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。
1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj,再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...
安宝特案例丨Vuzix AR智能眼镜集成专业软件,助力卢森堡医院药房转型,赢得辉瑞创新奖
在Vuzix M400 AR智能眼镜的助力下,卢森堡罗伯特舒曼医院(the Robert Schuman Hospitals, HRS)凭借在无菌制剂生产流程中引入增强现实技术(AR)创新项目,荣获了2024年6月7日由卢森堡医院药剂师协会࿰…...
【从零学习JVM|第三篇】类的生命周期(高频面试题)
前言: 在Java编程中,类的生命周期是指类从被加载到内存中开始,到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期,让读者对此有深刻印象。 目录 …...
MFC 抛体运动模拟:常见问题解决与界面美化
在 MFC 中开发抛体运动模拟程序时,我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点,详细解析原因并提供解决方案,同时兼顾界面美化,让模拟效果更专业、更高效。 问题一:历史轨迹与小球残影残留 现象 小球运动后,历史位置的 “残影”…...
Modbus RTU与Modbus TCP详解指南
目录 1. Modbus协议基础 1.1 什么是Modbus? 1.2 Modbus协议历史 1.3 Modbus协议族 1.4 Modbus通信模型 🎭 主从架构 🔄 请求响应模式 2. Modbus RTU详解 2.1 RTU是什么? 2.2 RTU物理层 🔌 连接方式 ⚡ 通信参数 2.3 RTU数据帧格式 📦 帧结构详解 🔍…...
Python训练营-Day26-函数专题1:函数定义与参数
题目1:计算圆的面积 任务: 编写一个名为 calculate_circle_area 的函数,该函数接收圆的半径 radius 作为参数,并返回圆的面积。圆的面积 π * radius (可以使用 math.pi 作为 π 的值)要求:函数接收一个位置参数 radi…...
HTTPS证书一年多少钱?
HTTPS证书作为保障网站数据传输安全的重要工具,成为众多网站运营者的必备选择。然而,面对市场上种类繁多的HTTPS证书,其一年费用究竟是多少,又受哪些因素影响呢? 首先,HTTPS证书通常在PinTrust这样的专业平…...
算法刷题-回溯
今天给大家分享的还是一道关于dfs回溯的问题,对于这类问题大家还是要多刷和总结,总体难度还是偏大。 对于回溯问题有几个关键点: 1.首先对于这类回溯可以节点可以随机选择的问题,要做mian函数中循环调用dfs(i&#x…...
