数组循环form表单对象校验

<el-button type="primary" icon="el-icon-circle-plus-outline" :size="$formSize" @click="addDevice" :disabled="readOnly">添加</el-button><!--整个表单块循环-->
<div v-for="(item,index) in actionList" :key="item.devId" class="block"><el-form ref="actionBlockForm" :model="item" :rules="formBlockRule" :size="$formSize" label-width="130px"><el-form-item :label="'执行设备'+(index < 10 ? '0' + (index+1) : (index+1))" prop="devAlias"><el-input v-model="item.devAlias" style="width: 300px;" disabled></el-input></el-form-item><el-form-item label="控制" prop="checkList"><el-checkbox-group v-model="item.checkList"><el-checkbox v-for="(item1,index1) in item.currentProperty" @change="handleCheckboxChange(index, item1.identifier)" :key="index1" :label="item1.identifier" :disabled="readOnly">{{item1.identifierDesc}}</el-checkbox></el-checkbox-group></el-form-item></el-form><el-button :size="$formSize" class="button-delete-primary" :disabled="readOnly" icon="el-icon-delete" @click="delBlock(index)">删除</el-button>
</div><!--提交按钮-->
<el-button :size="$buttonSize" class="button-minwidth" type="primary" :disabled="readOnly" :loading="btnLoading" @click="onSubmit">提交</el-button>
//数据定义、表单prop校验
data(){return{actionList:[],formBlockRule:{devAlias:[{ required: true, message: '执行设备名称不能为空', trigger: "blur" }],checkList:[{ type:'array', required: true, message: '请至少选择一个选项', trigger: 'change'} ]}}
},
methods:{//添加addDevice(){//this.actionList.push()},// 勾选监听//(动态勾选:通过监听改变直接赋值,选中指定勾选值取消其他值的勾选状态,勾选其他值取消指定值的勾选状态)handleCheckboxChange(index,value){if(value!=='multiSwitch'){let arr =this.actionList[index].checkList.filter((item) => item !== 'multiSwitch')this.actionList[index].checkList=arr}else{this.actionList[index].checkList=['multiSwitch']}},//删除delBlock(index){this.actionList.splice(index, 1);},//提交onSubmit(){//循环表单校验function validateList(formArr) {let arr = [];formArr.forEach((item) => {arr.push(new Promise((resolve) => {item.validate((valid) => {if (!valid) {resolve(false);}resolve(true);});}));});return arr;}const validateactionBlockForm = () => {return new Promise((resolve) => {let formArr = this.$refs["actionBlockForm"]; if (!formArr) {resolve(true);return;}Promise.all(validateList(formArr)).then((res) => {if (res.includes(false)) {resolve(false);} else {resolve(true);}});})}validateactionBlockForm().then((res) => {if (!res) return;//调接口提交数据}
}

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

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

相关文章

Vue基础面试题(二)

文章目录 1.Vue 单页应用与多页应用的区别2.Vue template 到 render 的过程3. Vue data 中某一个属性的值发生改变后&#xff0c;视图会立即同步执行重新渲染吗&#xff1f;4.Vue的优点5.vue如何监听对象或者数组某个属性的变化6.Vue模版编译原理7. 对SSR的理解8.Vue的性能优化…

实验五 网络中的树

文章目录 5.1 网络中的树第一关 认识树相关知识编程要求代码文件 第2关 根节点的二阶邻居求解方法相关知识编程要求代码文件 第3关 根节点的n阶邻居求解方法相关知识 5.2 权值矩阵与环&#xff08;无向网络&#xff09;第1关 无向网络的权值矩阵相关知识编程要求代码文件 第2关…

【机器学习】神经网络与深度学习:探索智能计算的前沿

前沿 神经网络&#xff1a;模拟人类神经系统的计算模型 基本概念 神经网络&#xff0c;又称人工神经网络&#xff08;ANN, Artificial Neural Network&#xff09;&#xff0c;是一种模拟人类神经系统结构和功能的计算模型。它由大量神经元&#xff08;节点&#xff09;相互连…

348_C++_find_if应用,查找过程是通过一个lambda表达式完成,查找容器中参数和[传入参数]有无相等参数

typedef std::list<std::pair<std::string, int>> PairList; PairList _valuePairs; if (!_valuePairs.empty()) {PairListItr itr

docker环境中配置phpstorm php xdebug调试工具

本文介绍通过docker compose的使用方式 第一步&#xff1a;在php镜像中安装phpxdebug扩展&#xff0c;比如php7.4对应的是xdebug3.1.6 第二步&#xff1a;设置项目中的docker-compose.yml docker-compose 增加开启xdebug的环境变量,host.docker.internal是宿主机的地址&#…

Kettle根据分类实现Excel文件拆分——kettle开发31

将整理好的一份供应商付款明细Excel文件&#xff0c;按供应商拆分成多个Excel文件。 实现思路 本文我们首先将供应商付款明细表&#xff0c;按照“名称”拆分成多份Excel文件。拆分Excel文件打算用两个转换实现&#xff0c;一个用来将Excel数据读取到参数中&#xff0c;另外一…

Internet Download Manager(IDM6.41)安装教程+软件安装包下载

IDM是一款多线程下载工具&#xff0c;全称InternetDownloadManager。IDM的多线程加速功能&#xff0c;能够充分利用宽带&#xff0c;所以下载速度会比较快&#xff0c;而且它支持断点续传。它的网站音视频捕获、站点抓取、静默下载等功能&#xff0c;也特别实用。 安 装 包 获 …

图像的几何变换之平移

文章目录 前言需求代码运行结果图 前言 图像的几何变换是一个再基础不过的知识点&#xff0c;包括等距变换&#xff0c;相似变换&#xff0c;仿射变换和投影变换。图像的几何变换是指对图像的位置&#xff0c;尺寸&#xff0c;大小&#xff0c;形状和投影进行变换&#xff0c;…

采集设置记录

采集设置&#xff1a; 1.任务添加 2.采集器设置 采集器设置之规则采集

OpenCV滤波器

滤波的作用 一副图像通过滤波器得到另一副图像&#xff1b;其中滤波器又称为卷积核&#xff0c;滤波的过程称为卷积。 图像卷积效果图 卷积的过程 一 卷积的几个基本概念 1 卷积核的大小 卷积核一般为奇数&#xff0c;如3X3,5X5,7X7等。 一方面是增加padding的原因。 另一…

孤立森林【python,机器学习,算法】

作用与特征 孤立森林主要用于样本的异常点检测&#xff0c;异常点检测又被称为离群点检测(outlier detection)&#xff0c;那么什么样的数据才能算作异常数据呢&#xff0c;一般情况异常点具有以下两个特性&#xff1a; 异常数据跟样本中大多数数据不太一样。异常数据在整体数…

activiti(一)-相关概述及相关表的定义

官网 1、概述 Activiti 是一个开源的、以 Java 为中心的业务流程管理&#xff08;BPM&#xff09;平台&#xff0c;旨在帮助企业自动化和管理复杂的业务流程。其核心功能包括工作流管理、任务分配、事件处理、流程监控和集成等。 1.1、主要功能和特点 流程设计和建模&#…

GaussDB技术解读——GaussDB架构介绍(三)

目录 9 智能关键技术方案 智能关键技术一&#xff1a;自治运维系统 智能关键技术二&#xff1a;库内AI引擎 智能关键技术三&#xff1a;智能优化器 10 驱动接口关键技术方案 GaussDB架构介绍&#xff08;二&#xff09;从数据持久化存取层(DataNode)关键技术方案、全局事…

Druid未授权访问漏洞修复

前言 安全组针对系统漏扫发现系统存在Druid未授权访问&#xff0c;会引发泄露系统敏感信息&#xff0c;漏洞链接为ip:端口/druid/index.html&#xff0c;可以清楚的查看数据库的相关连接信息&#xff0c;如下图所示&#xff1a; 漏洞修复 1、关闭Druid监控页面 在Druid的配…

右值引用和移动语义

什么是左值&#xff1f;什么是右值&#xff1f; 通俗来讲&#xff0c;可以出现在赋值语句左侧的&#xff0c;为左值&#xff1b;只能出现在赋值语句右侧的&#xff0c;为右值。 左值与右值的本质区别在于&#xff1a;左值能取地址&#xff0c;但右值不能。 本文主要通过三个场景…

使用星鸾云GPU云服务器搭配Jupyter Lab,创建个人AI大模型

最近我们公司IT部门宣布了一个大事情&#xff0c;他们开发了一款内部用的大模型&#xff0c;叫作一号AI员工&#xff08;其实就是一个聊天机器人&#xff09;&#xff0c;这个一号员工可以回答所有关于公司财务、人事、制度、产品方面的问题。 我问了句&#xff1a;公司加班有…

DevOps的原理及应用详解(一)

本系列文章简介&#xff1a; 在当今快速变化的商业环境中&#xff0c;企业对于软件交付的速度、质量和安全性要求日益提高。传统的软件开发和运维模式已经难以满足这些需求&#xff0c;因此&#xff0c;DevOps&#xff08;Development和Operations的组合&#xff09;应运而生&a…

GMT6绘制北半球

设置绘制区域及投影方式 投影方式选择立体等角投影&#xff0c;在GMT6中的命令是-Js # 定义区域变量和投影变量&#xff0c;纬度从北纬30度到极点 region-180/180/30/90 projection0/90/1:60000000 gmt set PROJ_ELLIPSOID WGS-84定义CPT及地形展示 现在定义一个CPT用于显示…

c++_0基础_讲解5 判断语句

判断语句 C是一种计算机编程语言&#xff0c;其提供了多种判断语句来控制程序的执行流程。判断语句允许程序根据条件判断的结果来选择不同的执行路径。在C中&#xff0c;常用的判断语句有if语句、switch语句和三元运算符。 if语句是最常用的判断语句之一。它的基本形式是if&a…

欧式家居官网源码系统-轻奢大气设计风格

一款家居家私的官方网站系统&#xff0c;设计轻奢大气。 前端内容均可通过后台修改。当然你也可以用于其他行业的官网使用&#xff0c;只要你喜欢这个设计。 大致功能&#xff1a; 1、会员系统 2、支付功能 3、标签功能 4、熊掌号提交功能 5、文章发布功能 6、SEO设置功能 7、多…