ElementUI el-form表单多层数组的校验

news2024/11/6 0:29:06

问题描述

提示:这里描述项目中遇到的问题:

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-input
            v-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-option
                  v-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-switch
                v-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>
            <li
              v-for="(customRuleItem, customRuleIndex) in addform.fieldList"
              :key="customRuleIndex"
            >
              <el-form-item
                class="field-name"
                label="字段名:"
                :prop="`fieldList.${customRuleIndex}.fieldCode`"
                :rules="formRules.fieldCode"
              >
                <el-input
                  v-model="addform.fieldList[customRuleIndex].fieldCode"
                  placeholder="请输入"
                  autocomplete="off"
                  clearable
                />
              </el-form-item>
              <div
                class="decode-rule-list"
                v-for="(
                  decodeRuleItem, decodeRuleIndex
                ) in customRuleItem.resolverEntities"
                :key="decodeRuleIndex"
              >
                <el-row :gutter="24">
                  <el-col :span="5">
                    <el-form-item
                      label=""
                      :prop="`fieldList.${customRuleIndex}.resolverEntities.${decodeRuleIndex}.resolverType`"
                      :rules="formRules.resolverType"
                    >
                      <el-select
                        v-model="decodeRuleItem.resolverType"
                        placeholder="请选择"
                      >
                        <el-option
                          v-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-input
                          v-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-input
                          v-model="decodeRuleItem.resolverConfigTwo"
                          placeholder="请输入"
                          autocomplete="off"
                          clearable
                        />
                      </el-form-item>
                    </el-col>
                  </template>
                  <el-col :span="3" class="decode-rule-operate">
                    <img
                      v-if="customRuleItem.resolverEntities.length > 1"
                      src="@/assets/images/common/delete.png"
                      alt=""
                      class="deleteImg"
                      @click="
                        handleDeleteResolver(customRuleIndex, decodeRuleIndex)
                      "
                    />
                    <img
                      src="@/assets/images/common/add.png"
                      alt=""
                      class="addImg"
                      @click="
                        handleAddResolver(customRuleIndex, decodeRuleIndex)
                      "
                    />
                  </el-col>
                </el-row>
              </div>
            </li>
          </ul>
          <div class="add-btn">
            <img
              src="@/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


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2230634.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

房贷利率定价调整机制变更的一点理解

个人理解&#xff1a; 1、已知2024年第三季度全国新发放商业性个人住房贷款加权平均利率为3.33%。 而2024年7月、8月、9月的5年期以上LPR数据分别如下&#xff1a; - 7月20日调整后&#xff0c;5年期以上LPR为3.75%&#xff1b; - 8月的5年期以上LPR与7月相同&#xff0c;…

设计模式讲解01-建造者模式(Builder)

1. 概述 建造者模式也称为&#xff1a;生成器模式 定义&#xff1a;建造者模式是一种创建型设计模式&#xff0c;它允许你将创建复杂对象的步骤与表示方式相分离。 解释&#xff1a;建造者模式就是将复杂对象的创建过程拆分成多个简单对象的创建过程&#xff0c;并将这些简单…

[MySQL]DQL语句(一)

查询语句是数据库操作中最为重要的一系列语法。查询关键字有 select、where、group、having、order by、imit。其中imit是MySQL的方言&#xff0c;只在MySQL适用。 数据库查询又分单表查询和多表查询&#xff0c;这里讲一下单表查询。 基础查询 # 查询指定列 SELECT * FROM …

C/C++语言基础--C++模板与元编程系列三(变量模板、constexpr、萃取等…………)

本专栏目的 更新C/C的基础语法&#xff0c;包括C的一些新特性 前言 模板与元编程是C的重要特点&#xff0c;也是难点&#xff0c;本人预计将会更新10期左右进行讲解&#xff0c;这是第三期&#xff0c;讲变量模板、constexpr、萃取等知识&#xff1b;C语言后面也会继续更新知…

leetcode155:最小栈

设计一个支持 push &#xff0c;pop &#xff0c;top 操作&#xff0c;并能在常数时间内检索到最小元素的栈。 实现 MinStack 类: MinStack() 初始化堆栈对象。void push(int val) 将元素val推入堆栈。void pop() 删除堆栈顶部的元素。int top() 获取堆栈顶部的元素。int get…

探秘机器学习算法:智慧背后的代码逻辑

1、 线性回归 线性回归是预测连续变量的一种简单而有效的方法。其数学模型假设因变量 y 与自变量 x 之间存在线性关系&#xff0c;用公式表示为&#xff1a; ​ Python代码实现 import numpy as np from sklearn.linear_model import LinearRegression import matplotlib.…

Spring中@Import和@ComponentScan注解差异

首先我们定义两个类 进行Component扫描 返回结果 进行Import导入 返回 结果 可以看 我们在对该类的所有bean加载没有任何问题 结果一致 但神奇的地方在于此时 我们把Tiger类头的Component注解去掉 ComponentScan注解无法识别Tiger中的Lion Bean 删掉Component 再进行ComonentS…

Ceph 学习指南 集群部署【 cephadm 】

文章目录 引言初识 Server SANServer SAN 和传统存储对比 Ceph 概述Ceph 的架构设计Ceph 的特点Ceph 块存储Ceph 文件系统Ceph 对象存储Ceph 介绍 Ceph 集群部署配置 aliyun 源配置时间同步配置 hosts 文件安装 docker配置免密登录ceph 集群部署ceph1 配置安装 python3安装 cep…

(JVM)在JVM中,类是如何被加载的呢?本篇文章就带你认识类加载的一套流程!

在讲类加载前&#xff0c;需要先了解一下方法区、堆和直接内存三块内存区域的运行模式 1. 方法区 JVM中的方法去是所有线程中共享的一块区域 它存储了跟类相关的信息 方法区 会在虚拟机被启动时创建。它逻辑上是堆的组成部分 它在不同的jvm厂商中存在的位置可能会不同&…

【Arduino】一分钟快速在vs code 编译开发Arduino

下载Arduino 对于一些开发者来说&#xff0c;Arduino开发较为不方便&#xff0c;不管从代码的阅读性、开发效率等等方面&#xff0c;vs code都要优于Arduino IDE开发&#xff0c;而且vs code开发可以使用插件&#xff0c;比如一些AI代码插件&#xff0c;可以加快开发速率&#…

qt QDialog详解

1、概述 QDialog是Qt框架中用于创建对话框的类&#xff0c;它继承自QWidget。QDialog提供了一个模态或非模态的对话框&#xff0c;用于与用户进行交互。模态对话框会阻塞其他窗口的输入&#xff0c;直到用户关闭该对话框&#xff1b;而非模态对话框则允许用户同时与多个窗口进…

去除windows系统桌面字体的黑影

然后点开设置&#xff0c;关闭以下的2个选项

ssm034学生请假系统+jsp(论文+源码)_kaic

毕 业 设 计&#xff08;论 文&#xff09; 题目&#xff1a;学生请假系统设计与实现 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本学生请假系统就是在这…

如何利用8款工具辅助建立需求管理体系

本文中&#xff0c;分享了8款辅助建立需求管理体系的工具&#xff1a;1.PingCode&#xff1b;2.Worktile&#xff1b;3.Jira&#xff1b;4.Trello&#xff1b;5.ClickUp&#xff1b;6.Notion&#xff1b;7.蓝鲸智云&#xff1b;8.红橘。 在如今快速发展的商业环境中&#xff0c…

使用Flask构建RESTful API

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 使用Flask构建RESTful API Flask简介 环境搭建 安装Flask 项目结构 创建应用 路由定义 请求处理 获取查询参数 获取请求体 响应…

基于LLaMA Factory对LLama 3指令微调的操作学习笔记

一、环境 在vscode中用连接云服务器&#xff0c;打开文件目录。 df -h #查看盘容量 二、下载LLaMA Factory框架和数据 下载LLaMA Factory到云服务器 git clone https://github.com/hiyouga/LLaMA-Factory.git cd LLaMA-Factory pip install -e . pip install -e .命令的含…

解决VMwareWorkstation17中CentOS7不能上网的问题

在CentOS 7中查看网络状态&#xff0c;执行命令&#xff1a; systemctl status network.service 示例如下&#xff1a; [rootlinux ~]# systemctl status network.service 发现网络错误&#xff0c;解决办法&#xff1a; [rootlinux ~]# chkconfig NetworkManager off [rootli…

UI设计公司—兰亭妙微—提供轨道交通行业UI设计

蓝蓝设计工作室2008年开始&#xff0c;2011年正式成立北京兰亭妙微科技有限公司&#xff0c;主创清华团队&#xff0c;专注软件和互联网ui设计开发&#xff0c;擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI&#xff0c;一直在学习进步。交通行业UE UI解…

Linux初阶——线程(Part3):POSIX 信号量 CP 模型变体

一、什么是 POSIX 信号量 信号量本质就是一个统计资源数量的计数器。​​​​​​​ 1、PV 操作 pv操作就是一种让信号量变化的操作。其中 P 操作可以让信号量减 1&#xff08;如果信号量大于 0&#xff09;&#xff0c;V 操作可以让信号量加 1. 2、信号量类型——sem_t 3…

【C语言】预处理(预编译)详解(下)(C语言最终篇)

文章目录 一、#和##1.#运算符2.##运算符 二、预处理指令#undef三、条件编译1.单分支条件编译2.多分支条件编译3.判断符号是否被定义4.判断符号是否没有被定义 四、头文件的包含1.库头文件的包含2.本地头文件的包含3.嵌套包含头文件的解决方法使用条件编译指令使用预处理指令#pr…