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' }];}
}

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

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

相关文章

机器学习之分类模型

机器学习之分类模型 概述分类模型逻辑回归最近邻分类朴素贝叶斯支持向量机决策树随机森林多层感知机基于集成学习的分类模型VotingBaggingStackingBlendingBoosting 概述 机器学习分类模型通过训练集进行学习&#xff0c;建立一个从输入空间 X X X到输出空间 Y Y Y&#xff08…

推断统计(独立样本t检验)

这里我们是采用假设检验中的独立样本t 检验来比较两个独立正态总体均值之间是否存在显著性差异&#xff0c;以比较城市与农村孩子的心理素质是否有显著差异为例 。 这里我们首先是假设城市孩子与农村孩子心理素质无显著差异&#xff0c;但是此时方差是否齐性是未知的&#xff0…

题目:2566.替换一个数字后的最大差值

​​题目来源&#xff1a; leetcode题目&#xff0c;网址&#xff1a;2566. 替换一个数字后的最大差值 - 力扣&#xff08;LeetCode&#xff09; 解题思路&#xff1a; 将从左到右第一个非 9 数字全部修改为 9 以得到最大值。将从左到右第一个数字全部修改为 0 以得到最小值&a…

c#实现命令模式

下面是一个使用C#实现命令模式的示例代码&#xff1a; using System; using System.Collections.Generic;// 命令接口 public interface ICommand {void Execute();void Undo(); }// 具体命令&#xff1a;打开文件 public class OpenFileCommand : ICommand {private FileMana…

【MySQL】MySQL不走索引的情况分析

未建立索引 当数据表没有设计相关索引时&#xff0c;查询会扫描全表。 create table test_temp (test_id int auto_incrementprimary key,field_1 varchar(20) null,field_2 varchar(20) null,field_3 bigint null,create_date date null );expl…

ffmpeg命令行是如何打开vf_scale滤镜的

前言 在ffmpeg命令行中&#xff0c;ffmpeg -i test -pix_fmt rgb24 test.rgb&#xff0c;会自动打开ff_vf_scale滤镜&#xff0c;本章主要追踪这个流程。 通过gdb可以发现其基本调用栈如下&#xff1a; 可以看到&#xff0c;query_formats&#xff08;&#xff09;中创建的v…

Unity框架学习--2

接上文 IOC 容器是一个很方便的模块管理工具。 除了可以用来注册和获取模块&#xff0c;IOC 容器一般还会有一个隐藏的功能&#xff0c;即&#xff1a; 注册接口模块 抽象-实现 这种形式注册和获取对象的方式是符合依赖倒置原则的。 依赖倒置原则&#xff08;Dependence I…

maven install

maven install maven 的 install 命令&#xff0c;当我们的一个 maven 模块想要依赖其他目录下的模块时&#xff0c;直接添加会找不到对应的模块&#xff0c;只需要找到需要引入的模块&#xff0c;执行 install 命令&#xff0c;就会将该模块放入本地仓库&#xff0c;就可以进…

Linux tar包安装 Prometheus 和 Grafana(知识点:systemd Unit/重定向)

0. 介绍 用tar包的方式安装 Prometheus 和 Grafana Prometheus:开源的监控方案Grafana:将Prometheus的数据可视化平台 Prometheus已经有了查询功能为什么还需要grafana呢?Prometheus基于promQL这一SQL方言,有一定门槛!Grafana基于浏览器的操作与可视化图表大大降低了理解难…

Vue3 setup tsx 子组件向父组件传值 emit

需求&#xff1a;Vue3 setup 父组件向子组件传值&#xff0c;子组件接收父组件传入的值&#xff1b;子组件向父组件传值&#xff0c;父组件接收的子组件传递的值。 父组件&#xff1a;parent.tsx&#xff1a; import { defineComponent, ref, reactive } from vue; import To…

【Android】okhttp爆java.lang.IllegalStateException: closed的解决方法

解决 java.lang.IllegalStateException: closed异常通常是由于OkHttp中的Response对象在调用response.body().string()后被关闭而导致的。 在代码中&#xff0c;在onResponse()方法中如果两次调用了response.body().string()&#xff0c;每次调用都会消耗掉响应体并关闭Respo…

如何优化PHP Smarty模板的性能?

Smarty模板是一种非常强大的模板引擎&#xff0c;但是如果不正确地使用&#xff0c;可能会导致你的网站慢得像一只树懒&#xff01; 那么&#xff0c;如何优化Smarty模板的性能呢&#xff1f; 减少Smarty对象的创建 你可能会在代码中多次创建Smarty对象。但是&#xff0c;每次…

Server - 文字转语音 (Text to Speech) 的在线服务 TTSMaker

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/132287193 TTSMaker 是一款免费的文本转语音工具&#xff0c;提供语音合成服务&#xff0c;支持多种语言&#xff0c;包括英语、法语、德语、西班…

什么是冒烟测试?

冒烟测试&#xff0c;刚进公司就接触到了。只是刚开始一直没有体会到冒烟的含义和精髓&#xff0c;一直以为是冒烟测试就是把待测产品的主要功能测试一下就行了。后面回想一下&#xff0c;不是那么回事的。 冒烟测试源自硬件行业&#xff0c;对一个硬件或者硬件组件改动后&…

Exams/ece241 2013 q4

蓄水池问题 S3 S2 S1 例如&#xff1a;000 代表 无水 &#xff0c;需要使FR3, FR2, FR1 都打开&#xff08;111&#xff09; S3 S2 S1 FR3 FR2 FR1 000 111 001 011 011 001 111 000 fr代表水变深为…

快手商品详情数据API 抓取快手商品价格、销量、库存、sku信息

快手商品详情数据API是用来获取快手商品详情页数据的接口&#xff0c;请求参数为商品ID&#xff0c;这是每个商品唯一性的标识。返回参数有商品标题、商品标题、商品简介、价格、掌柜昵称、库存、宝贝链接、宝贝图片、商品SKU等。 接口名称&#xff1a;item_get 公共参数 名…

【PostgreSQL的CLOG解析】

同样还是这张图&#xff0c;之前发过shared_buffer和os cache、wal buffer和work mem的文章&#xff0c;今天的主题是图中的clog&#xff0c;即 commit log&#xff0c;PostgreSQL10之前放在数据库目录的pg_clog下面。PostgreSQL10之后修更名为xact,数据目录变更为pg_xact下面&…

WPF 本地化的最佳做法

WPF 本地化的最佳做法 资源文件英文资源文件 en-US.xaml中文资源文件 zh-CN.xaml 资源使用App.xaml主界面布局cs代码 App.config辅助类语言切换操作类资源 binding 解析类 实现效果 应用程序本地化有很多种方式&#xff0c;选择合适的才是最好的。这里只讨论一种方式&#xff0…

pytorch单机多卡后台运行

nohup sh ./train_chat.sh > train_chat20230814.log 2>1&参考资料 Pytorch单机多卡后台运行的解决办法

kafka-2.12使用记录

kafka-2.12使用记录 安装kafka 2.12版本 下载安装包 根据你的系统下载rpm /deb /zip包等等, 这里我使用的是rpm包 安装命令 rpm -ivh kafka-2.12-1.nfs.x86_64.rpm启动内置Zookeeper 以下命令要写在同一行上 /opt/kafka-2.12/bin/zookeeper-server-start.sh /opt/kafka-2…