循环中使用el-form

循环中使用el-form 主要是校验问题
el-table 的数据 :data=“ruleForm.tableData”
:prop=“‘tableData.’ + $index + ‘.name’” :rules=“rules.name”

<el-button type="primary" @click="addNewData">新增项目</el-button><el-form :model="ruleForm" ref="ruleFormRef" :rules="rules"><el-table :data="ruleForm.tableData"><el-table-column lable="name"><template #default="{ row, $index }"><el-form-item :prop="'tableData.' + $index + '.name'" :rules="rules.name"><el-input v-model="row.name"></el-input></el-form-item></template></el-table-column><el-table-column lable="min"><template #default="{ row, $index }"><el-form-item :prop="'tableData.' + $index + '.min'" :rules="rules.min"><el-input v-model="row.min"></el-input></el-form-item></template></el-table-column><el-table-column lable="max"><template #default="{ row, $index }"><el-form-item :prop="'tableData.' + $index + '.max'" :rules="rules.max"><el-input v-model="row.max"></el-input></el-form-item></template></el-table-column><el-table-column label="操作"><template #default="{ row, $index }"><el-button link @click="confirm(row, $index, ruleFormRef)">确定</el-button><el-button link @click="ruleForm.tableData.splice($index, 1)">删除</el-button></template></el-table-column></el-table></el-form><el-button type="primary" @click="submit(ruleFormRef)"> 提交</el-button>
import type { FormInstance } from 'element-plus';
import { reactive, ref } from 'vue';
interface ruleForm {tableData: [{ name: String, min: String, max: String, status: Boolean }]
}
const ruleFormRef: any = ref<FormInstance>()
const ruleForm: any = reactive<ruleForm>({tableData: [{ name: '', min: '', max: '', status: false }]
})
const rules: any = reactive({name: [{ required: true, message: '必填项', trigger: 'blur' }],min: [{ required: true, message: '必填项', trigger: 'blur' }],max: [{ required: true, message: '必填项', trigger: 'blur' }]
})

在这里插入图片描述
// 单行验证

const confirm = async (row: any, index: number, formEl: FormInstance | undefined) => {const { isEdit, ...partial } = row;const props = Object.keys(partial).map(item => `tableData.${index}.${item}`);await formEl?.validateField(props, async (valid: any) => {if (valid) {// 验证通过,} else {// 验证不通过}})
}

// 总体验证提交

const submit = async (formEl: FormInstance | undefined) => {if (!formEl) returnawait formEl.validate(async (valid, fields) => {if (valid) {// 验证通过,} else {// 验证不通过}})
}

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

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

相关文章

SAP学习笔记 - 开发13 - CAP 之 添加数据库支持(Sqlite)

上一章学习了CAP开发准备&#xff0c;添加Service。 SAP学习笔记 - 开发12 - CAP 之 开发准备&#xff0c;添加服务-CSDN博客 本章继续学习CAP开发 - 添加数据库支持&#xff08;Sqlite&#xff09;。 目录 1&#xff0c;数据库准备 - H2 内存数据库 - Sqlite数据库 a&…

【数据结构与算法】——图(三)——最小生成树

前言 本将介绍最小生成树以及普里姆算法&#xff08;Prim&#xff09;和克鲁斯卡尔&#xff08;Kruskal&#xff09; 本人其他博客&#xff1a;https://blog.csdn.net/2401_86940607 图的基本概念和存储结构&#xff1a;【数据结构与算法】——图&#xff08;一&#xff09; 源…

Flink运维要点

一、Flink 运维核心策略 1. 集群部署与监控 资源规划 按业务优先级分配资源&#xff1a;核心作业优先保障内存和 CPU&#xff0c;避免资源竞争。示例&#xff1a;为实时风控作业分配专用 TaskManager&#xff0c;配置 taskmanager.memory.process.size8g。 监控体系 集成 Prom…

面试点补充

目录 1. 搭建lnmp Linux 系统基础命令 nginx相关命令 MySQL 相关命令 PHP 相关命令 验证命令 下载并部署 Discuz! X3.4 论坛 到 Nginx 网站 2. 脑裂 2.1 脑裂的定义 2.2 脑裂产生的原因 1. 主备节点之间的心跳线中断 2. 优先级冲突 3. 系统或服务负载过高 2.3 如何…

天能股份SAP系统整合实战:如何用8个月实现零业务中断的集团化管理升级

目录 天能股份SAP系统整合案例&#xff1a;技术驱动集团化管理的破局之路 一、企业背景&#xff1a;新能源巨头的数字化挑战 二、项目难点&#xff1a;制造业的特殊攻坚战 1. 生产连续性刚性需求 2. 数据整合三重障碍 3. 资源限制下的技术突围 三、解决方案&#xff1a;S…

嵌入式学习笔记 - STM32独立看门狗IWDG与窗口看门狗WWDG的区别

下图说明了独立看门狗IWDG与窗口看门狗WWDG的区别: 从中可以看出&#xff1a; 一 复位 独立看门狗在计数器技术导0时复位&#xff0c; 窗口看门狗在计数器计数到0X40时复位。 二 喂狗 独立看门狗可以在计数器从预装载值降低到0过过程中的任意时间喂狗&#xff0c; 窗口看…

配电房值守难题终结者:EdgeView智能监控的7×24小时守护

在电力行业数字化转型的背景下&#xff0c;开关柜中的设备作为电能传输过程中的重要一环&#xff0c;其质量及运行状态直接关系到电网的安全性、可靠性、稳定性和抵抗事故的能力。 然而&#xff0c;在开关柜的调试部署与运行使用阶段&#xff0c;也常常会遇到设备标准不统一、…

B树与B+树全面解析

B树与B树全面解析 前言一、B 树的基本概念与结构特性1.1 B 树的定义1.2 B 树的结构特性1.3 B 树的节点结构示例 二、B 树的基本操作2.1 查找操作2.2 插入操作2.3 删除操作 三、B 树的基本概念与结构特性3.1 B 树的定义3.2 B 树的结构特性3.3 B 树的节点结构示例 四、B 树与…

如何使用VCS+XA加密verilog和spice网表

如果要交付verilog&#xff0c;但是需要对方进行VCS仿真&#xff0c;那么可以用以下方法&#xff1a; 一、基于编译指令的局部加密​ ​适用场景​&#xff1a;需精确控制加密范围&#xff08;如仅加密核心算法或敏感逻辑&#xff09;。 ​实现步骤​&#xff1a; ​代码标注…

策略模式-枚举实现

策略模式的实现方法有很多&#xff0c;可以通过策略类if,else实现。下面是用枚举类实现策略模式的方法。 定义一个枚举类&#xff0c;枚举类有抽象方法&#xff0c;每个枚举都实现抽象方法。这个策略&#xff0c;实现方法是工具类的很实现&#xff0c;代码简单好理解 枚举实现…

大数据hadoop小文件处理方案

Hadoop处理小文件问题的解决方案可分为存储优化、处理优化和架构优化三个维度,以下是综合技术方案及实施要点: 一、存储层优化方案 1.文件合并技术 离线合并:使用hadoop fs -getmerge命令将多个小文件合并为大文件并重新上传; MapReduce合并:开发专用MR…

线程调度与单例模式:wait、notify与懒汉模式解析

一.wait 和 notify&#xff08;等待 和 通知&#xff09; 引入 wait notify 就是为了能够从应用层面&#xff0c;干预到多个不同线程代码的执行顺序&#xff0c;可以让后执行的线程主动放弃被调度的机会&#xff0c;等先执行的线程完成后通知放弃调度的线程重新执行。 自助取…

ros运行包,Ubuntu20.04成功运行LIO-SAM

zz:~/lio_sam_ws$ source devel/setup.bash zz:~/lio_sam_ws$ roslaunch lio_sam run.launch 创建包链接&#xff1a; 链接1&#xff1a;Ubuntu20.04成功运行LIO-SAM_ubuntu20.04运行liosam-CSDN博客 链接2&#xff1a;ubuntu 20.04 ROS 编译和运行 lio-sam,并且导出PCD文件…

AI自动化工作流:开启当下智能生产力的价值

举手之言&#xff1a;AI自动化工作流创造了什么呢&#xff1f; AI自动化工作流 &#xff0c;顾名思义&#xff0c;是将人工智能&#xff08;AI&#xff09;技术与自动化流程相结合&#xff0c;通过智能化的方式来完成复杂的任务和操作。简单来说&#xff0c;它就是利用AI的强大…

【设计模式】- 行为型模式2

观察者模式 定义了一对多的依赖关系&#xff0c;让多个观察者对象同时监听某一个对象主题。这个主题对象在状态变化时&#xff0c;会通知所有的观察者对象&#xff0c;让他们能够自动更新自己。 【主要角色】 抽象主题角色&#xff1a;把所有观察者对象保存在一个集合里&…

mapbox-gl强制请求需要accessToken的问题

vue引入"mapbox-gl": "^2.15.0", 1.13以后得版本&#xff0c;都强制需要验证这个mapboxgl.accessToken。 解决办法&#xff1a;实例化地图的代码中&#xff0c;加入这个&#xff1a; const originalFetch window.fetch; window.fetch function ({ url…

已知6、7、8月月平均气温和标准差,求夏季季平均温度与标准差

由下面定理&#xff0c;得出平方和的公式&#xff1a;&#xff08;即每天的温度平方和&#xff09; 这样就可以推出季平均的算法&#xff1a; 举例&#xff1a;在Excel用公式算&#xff0c;不要手算&#xff1a; 因此季平均&#xff1a;(B2*C2B3*C3B4*C4)/SUM(B2:B4) 季标准差…

手机内存不够,哪些文件可以删?

1️⃣应用缓存文件 安卓&#xff1a;通过「文件管理器」→「Android」→「data」或「cache」文件夹&#xff08;部分需权限&#xff09;&#xff0c;或直接在应用设置中清除缓存 iOS&#xff1a;无需手动清理&#xff0c;系统会自动管理&#xff0c;或在应用内设置中清除&…

可编辑98页PPT | 某大型制造业数字化转型战略规划项目方案

荐言摘要&#xff1a;某大型制造业数字化转型战略规划项目方案聚焦企业全价值链升级&#xff0c;以“数据驱动业务重塑”为核心&#xff0c;打造行业标杆级数字化能力。项目将分三阶段推进&#xff0c;首阶段聚焦顶层设计&#xff0c;通过现状诊断明确痛点&#xff1a;针对企业…

lovart design 设计类agent的系统提示词解读

文章目录 lovart 设计agent介绍角色定义工作规范工具调用任务复杂度指南任务移交指南其他ref lovart 设计agent介绍 lovart作为设计agent&#xff0c;产品功能包括&#xff1a; 全链路设计能力&#xff1a;可以快速生成完整的品牌视觉方案&#xff0c;包括标志、配色、品牌规范…