表单v-for动态添加的校验,即动态数据项表单验证

👇

:prop="'devInfos.'+index+'.ip'"  // 官方写法
:rules="[{ required: true, message: '请输入设备mac'}]" // 行内写规则
data () {return {ruleForm: {roomName: '',maxPeopleNum: '',isEnable: false,devInfos: [{id: '',ip: '',mac: '',account: '',password: ''}]},}
}

这样就好啦

   <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="会议室名称" prop="roomName"><el-input v-model="ruleForm.roomName" placeholder="请输入会议名称"></el-input></el-form-item><el-form-item label="可容纳人数" prop="maxPeopleNum"><el-input v-model.number="ruleForm.maxPeopleNum" type="number" placeholder="请输入可容纳人数"></el-input></el-form-item><el-form-item label="停用/启用" prop="isEnable"><el-switch v-model="ruleForm.isEnable"></el-switch></el-form-item><div v-for="(item, index) in ruleForm.devInfos" :key="index" ><el-form-item class="devInfos" label="设备IP" :prop="'devInfos.'+index+'.ip'" :rules="[{ required: true, message: '请输入设备IP'}]"><el-input v-model="item.ip" placeholder="请输入设备IP"></el-input></el-form-item><el-form-item label="设备mac" :prop="'devInfos.'+index+'.mac'" :rules="[{ required: true, message: '请输入设备mac'}]"><el-input v-model="item.mac" placeholder="请输入设备mac"></el-input></el-form-item><el-form-item label="设备账号" :prop="'devInfos.'+index+'.account'" :rules="[{ required: true, message: '请输入设备账号'}]"><el-input v-model="item.account" placeholder="请输入设备账号"></el-input></el-form-item><el-form-item label="设备密码" :prop="'devInfos.'+index+'.password'" :rules="[{ required: true, message: '请输入设备密码'}]"><el-input v-model="item.password" placeholder="请输入设备密码"></el-input></el-form-item><el-form-item label=""><el-button type="text" @click="addDevInfo">新增</el-button><el-button v-show="ruleForm.devInfos.length>1" type="text" @click="delDevInfo(index)">删除</el-button></el-form-item></div><el-form-item class="btn"><el-button class="cancelBtn" @click="handleClose('ruleForm')">取消</el-button><el-button :loading="btnLoading" class="publishBtn" @click="save('ruleForm')">保存</el-button></el-form-item></el-form>

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

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

相关文章

笔试强训Day3

学了一坤时Linux&#xff0c;赶紧来俩道题目放松放松。 T1&#xff1a;在字符串中找出连续最长的数字串 链接&#xff1a;在字符串中找出连续最长的数字串__牛客网 输入一个字符串&#xff0c;返回其最长的数字子串&#xff0c;以及其长度。若有多个最长的数字子串&#xff0c…

VSCode『SSH』连接服务器『GUI界面』传输

前言 最近需要使用实验室的服务器训练带有 GUI 画面的 AI 算法模型&#xff08;pygame&#xff09;&#xff0c;但是我是使用 SSH 连接的&#xff0c;不能很好的显示模型训练的效果画面&#xff0c;所以下面将会讲解如何实现 SSH 连接传输 Linux GUI 画面的 注&#xff1a;我们…

Qt---day4---9.20

qt完成时钟&#xff1a; 头文件&#xff1a; #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QPaintEvent> #include <QtDebug> #include <QPainter> #include <QTimerEvent> #include <QTime>QT_BEGIN_NAMESPACE names…

Vue+iview 组件中通过v-for循环动态生成form表单进行表单校验

在做项目时&#xff0c;需要根据需要动态添加或新增表单&#xff0c;同时还需要对表单做校验。详情如下图&#xff1a; 刚开始做表单验证的时候&#xff0c;对于这个动态的表单验证有点难搞&#xff0c;试了好几种方法都没有搞定。最后按照下面这种方法实现了&#xff0c;以此…

【数据结构】顺序查找,折半查找,分块查找的知识点总结及相应的代码实现

目录 1、顺序查找 定义及步骤 代码实现 2、折半查找 定义及步骤 代码实现 折半查找判定树 3、分块查找 定义及步骤 1、顺序查找 定义及步骤 顺序查找的定义&#xff1a;从数据集合的起始位置开始&#xff0c;逐一比较每个数据元素&#xff0c;直到找到所要查找…

windows下实现mysql8的主从复制

1、下载mysql8的安装包 MySQL :: Download MySQL Community Server 2、放到指定目录进行解压&#xff0c;更改名称为mysql-8.1.0-winx64-master,并复制一份作为从数据库 3、在bin目录下创建一个my.ini文件 添加如下内容 [mysqld] basedir"D:/soft/mysql/mysql-8.1.0-win…

【精华】关于生成式AI的思考

文章目录 0 论述1 观点2 模型开发栈3 新兴产品蓝图4 思考番外篇-与AI聊天须知 0 论述 生成式AI的首年——“第一幕”——是从技术出发的。我们发现了一个新的“锤子”——基础模型&#xff0c;并引发了一波轻量级的新技术演示应用。 我们现在认为市场正在进入“第二幕”——这…

TS编译选项——TS文件编译后消除注释

在tsconfig.json文件中配置removeComments属性 {"compilerOptions": {// outDir 用于指定编译后文件所在目录"outDir": "./dist", // 将编译后文件放在dis目录下// 是否文件编译后移除注释"removeComments": true} } 左边是编写的t…

华为云云耀云服务器L实例评测 | 基于minikube搭建单节点kubernetes集群

目录 1 安装Docker2 conntrack-tools3 安装minikube4 下载二进制&#xff1a;kubeadm、kubectl、kubelet5 准备镜像6 启动minikube7 简单测试8 开启dashboard ​ Minikube 是一个使用golang开发的单节点kubernetes集群环境&#xff0c;在资源紧张的情况下&#xff0c;可以用于快…

MySQL - 关于约束类型和作用的介绍

约束的概念&#xff1a;约束是作用于表中字段上的规则&#xff0c;用于限制存储在表中的数据。 约束的作用&#xff1a;用于保证数据库中数据的正确性、完整性和一致性。 约束分类&#xff1a; 约束类型作用关键字非空约束限制该字段的数据不能为nullnot null唯一约束保证该…

什么是Peppol ID?如何创建?

Peppol 网络的两大优势是安全和高效&#xff0c;由于Peppol 最常用于电子发票&#xff0c;因此这些优势在电子发票上展露无遗。相比之下&#xff0c;通过电子邮件发送 PDF 格式的发票和其他文件不仅处理成本较高&#xff0c;而且容易出现发票欺诈。 如果您所在的公共部门组织或…

AI聊天ChatGPT系统源码卡密验证开源版

ChatGPT卡密验证版源码是一个基于PHP7.4和MySQL5.6的聊天AI源码&#xff0c;它不仅支持暗黑模式、反应速度极快&#xff0c;而且充值方面采用后台生成卡密方式&#xff0c;方便快捷&#xff0c;如果您有能力将其接入在线支付&#xff0c;即可进一步拓展充值方式&#xff0c;为更…

云原生容器平台——新华资产数字化转型加速器

新华资产管理股份有限公司&#xff08;以下简称“新华资产”&#xff09;于2006年5月经中国保险监督管理委员会批准、7月3日正式挂牌成立&#xff0c;是国内首批专业保险资产管理机构。2020年上半年&#xff0c;公司管理的资产规模突破万亿元人民币&#xff0c;投资收益水平居行…

Python 用列表实现模拟手机通讯录(简易版)

"""列表实现好友管理系统知识点&#xff1a;1、列表存储信息2、列表增删改查3、嵌套循环4、字符串分割和拼接&#xff08;重点&#xff09;5、列表索引"""# 暂存好友信息&#xff08;程序结束数据删除&#xff09; friend_info list()input_buf…

飞书与企业微信的异同

云文档 飞书的云文档会自动用游览器打开&#xff0c;不会直接在PC应用中打开&#xff08;移动端能在应用中打开&#xff09;。 飞书云文档能够插入视频、流程图、问卷等等 聊天消息交互 钉钉也有类似的功能&#xff0c;可以针对消息进行点赞等回复 钉钉的消息回复还有【收到…

Room Arranger for Mac: 轻松创造梦想家园的必备设计软件

你是否曾经梦想过自己动手设计理想中的家居环境&#xff1f;你是否希望通过一个简单易用的工具来实现你的设计理念&#xff1f;那么&#xff0c;Room Arranger for Mac就是你的最佳选择&#xff01; Room Arranger是一款专门为Mac用户打造的室内设计软件&#xff0c;它拥有直观…

适用于初学者,毕业设计的5个c语言项目,代码已开源

C语言项目集 项目介绍 该项目适用于初学者学习c语言&#xff0c;也适用于高校学生课程设计&#xff0c;毕业设计参考。 项目并不能满足所有人的需求&#xff0c;可进行项目指导&#xff0c;定制开发。 开源地址 c语言项目代码地址 项目列表 该项目包含如下5个管理系统&am…

Linux 入门:基本指令

本篇文章来介绍我们在初学Linux时可以会碰倒的一些基本指令&#xff0c;让我们对这些指令有一个基本的了解。 目录 01. ls 指令 02. pwd 命令 03. cd 指令 04. touch 指令 05. mkdir 指令&#xff08;重要&#xff09; 06. rmdir指令 && rm 指令&#xff08;重…

Java深入理解线程的三大特性

目录 1 CPU缓存导致可见性问题2 线程切换导致原子性问题3 性能优化导致有序性问题4 JMM(Java Memory Model)5 volatile6 synchronized 1 CPU缓存导致可见性问题 线程的三大特性&#xff1a; 可见性&#xff1a;Visibility有序性&#xff1a;Ordering原子性&#xff1a;Atomic…

轻松搭建Linux的环境

Linux的环境的搭建 目录&#xff1a;一、使用云服务器二、使用虚拟机软件2.1 下载虚拟机软件2.2 下载一个操作系统的镜像文件 三、直接安装在物理机上四、使用XShell远程登录到Linux 目录&#xff1a; 我们平常用的都是windows系统&#xff0c;对Linux系统还是很陌生得。为什么…