vue3对象数组格式的动态表单校验

如你有一个表单,表单内容是对象,但是对象内还有可动态循环的数组进行动态表单校验。

效果如图:查看源码
在这里插入图片描述

页面内容:

<div class="arrForm-Box"><el-form :model="state.formData" :rules="rules" ref="formDataRef" label-width="80"><el-row :gutter="35"><el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb10"><el-form-item label="账号" prop="account"><el-input v-model="state.formData.account" placeholder="账号" clearable /></el-form-item></el-col><el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb10"><el-form-item label="密码" prop="password"><el-input v-model="state.formData.password" type="password" placeholder="密码" clearable /></el-form-item></el-col><el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"><el-button size="small" class="w100" @click="add">新增</el-button></el-col><el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"><el-row :gutter="35" v-for="(v, k) in state.formData.userList" :key="k"><el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"><el-form-item label="姓名" :prop="`userList[${k}].name`" :rules="[{ required: true, message: `请输入姓名` }]"><template #label><el-button type="danger" :icon="Delete" circle plain size="small" @click="remove(k)" /><span class="ml5">姓名</span></template><el-input v-model="state.formData.userList[k].name" placeholder="姓名" clearable /></el-form-item></el-col><el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"><el-form-item label="年龄" :prop="`userList[${k}].age`" :rules="[{ required: true, message: `请输入年龄` },{ type: 'number', message: '请输入数字' }]"><el-input v-model.number="state.formData.userList[k].age" placeholder="年龄" clearable /></el-form-item></el-col></el-row></el-col><el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12"><el-form-item><el-button type="primary" @click="submitForm()">提交</el-button><el-button @click="resetForm()">重置</el-button></el-form-item></el-col></el-row></el-form>
</div>

逻辑代码:
表单对象单独写一个rules,里面的数组表单可直接索引动态绑定prop来设置

import {ref, reactive} from "vue";
import {Delete, Plus} from '@element-plus/icons-vue'const formDataRef = ref(null);
const state = reactive({formData: {account: "",password: "",userList: []}
})/* 规则 */
const rules = reactive({account: [{required: true,message: '请输入账号'},],password: [{required: true,message: '请输入密码'},],
})/* 新增 */
const add = () => {if (state.formData.userList == undefined) state.formData.userList = [];state.formData.userList?.push({});
};/* 删除 */
const remove = (index) => {state.formData.userList.splice(index, 1);
}/* 提交 */
const submitForm = () => {formDataRef.value.validate(async (valid) => {if (!valid) return;console.log('submit: ',state.formData);})
}/* 重置 */
const resetForm = () => {formDataRef.value.resetFields();
}

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

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

相关文章

spring boot参数验证注解@NotNull、@NotBlank和@NotEmpty区别

目录 前言说明举例 前言 使用spring boot参数验证是常常会使用NotNull、NotBlank和NotEmpty三个判断是否不为空的注解&#xff0c;中文都有不能为空的意思&#xff0c;大部分使用者都傻傻分清它们之间到底有什么区别。今天就让咱们来一起探索它们之间的不同吧。 说明 注解名…

数据驱动实战二

目标 掌握数据驱动的开发流程掌握如何读取JSON数据文件巩固PO模式 1. 案例 对TPshop网站的登录模块进行单元测试 1.1 实现步骤 编写测试用例采用PO模式的分层思想对页面进行封装编写测试脚本定义数据文件&#xff0c;实现参数化 1.2 用例设计 1.3 数据文件 {"login…

sprig 项目启动时报错:MybatisDependsonDatabaseInitializationDetector

问题 使用application.yml启动项目报错&#xff1a; 解决方案 修改pom.xml: 修改这两处的版本

[笔试训练](十八)

目录 052:字符串压缩 053:chika和蜜柑 054:01背包 052:字符串压缩 压缩字符串(一)_牛客题霸_牛客网 (nowcoder.com) 题目&#xff1a; 题解&#xff1a; 双指针模拟 class Solution { public:string compressString(string param) {int nparam.size();string ret;int num…

Linux 操作系统TCP、UDP

1、TCP服务器编写流程 头文件&#xff1a; #include <sys/socket.h> 1.1 创建套接字 函数原型&#xff1a; int socket(int domain, int type, int protocol); 参数&#xff1a; domain: 网域 AF_INET &#xff1a; IPv4 AF_INET6 &a…

文章分享:《肿瘤DNA甲基化标志物检测及临床应用专家共识(2024版)》

本文摘自于《肿瘤DNA甲基化标志物检测及临床应用专家共识&#xff08;2024版&#xff09;》 目录 1. DNA甲基化标志物概述 2 DNA甲基化标志物的临床检测 2.1 临床样本前处理注意事项 2.2 DNA甲基化标志物检测技术方法 2.2.1 DNA提取与纯化 2.2.2 DNA转化 2.2.3 DNA 甲基…

PDF文档如何签名?用Adobe信任的文档签名证书

为PDF文档电子签名的方式有多种多样&#xff0c;但并非所有方案都是可靠的。我们在市面看到的电子图章、电子印章等仅在文档中置入印章图片的方式&#xff0c;并不具有任何法律上的有效性&#xff0c;它只是显示印章的图形效果&#xff0c;随时可以被篡改、伪造。PDF文档如何签…

STC8增强型单片机开发【定时器Timer⭐】

目录 一、引言 二、定时器基础知识 三、STC8定时器配置 四、代码示例 五、总结 一、引言 在单片机开发中&#xff0c;定时器&#xff08;Timer&#xff09;是一个极其重要的组件&#xff0c;它允许开发者基于时间触发各种事件或任务。STC8增强型单片机作为一款功能丰富的…

【电路笔记】-无源高通滤波器

无源高通滤波器 文章目录 无源高通滤波器1、概述2、一阶高通滤波器的频率响应3、高通滤波器示例4、二阶高通滤波器5、RC 差异化因素高通滤波器与低通滤波器电路完全相反,因为这两个组件已互换,滤波器输出信号现在从电阻器两端获取。 1、概述 由于低通滤波器只允许低于其截止…

C++动态内存管理:与C语言动态内存管理的差异之争

当你改错一行代码的时候&#xff1a; 当你想要重构别人的代码时&#xff1a; 目录 前言 一、C/C的内存分布 二、C/C语言中的动态内存管理 三、new与delete的实现原理 总结&#xff1a; 前言 在C中&#xff0c;内存管理是一个至关重要的主题。正确地管理内存可以避免内存泄…

抖音新店怎么对接达人?对接达人秘籍流程分享,让你学会找达人

大家好&#xff0c;我是电商花花。 新手怎么对接达人带货&#xff1f;这是我们新手商家 要考虑的问题。 很多新手抱怨自己新店铺不出单&#xff0c;没有销量&#xff0c;对接达人又怕达人看不上&#xff0c;没有达人愿意帮我带货&#xff0c;在面临这样的情况下不知道该怎么办…

[C++][数据结构]哈希2:开散列/哈希桶的介绍和简单实现

前言 接着上一篇文章&#xff0c;我们知道了闭散列的弊端是空间利用率比较低&#xff0c;希望今天学习的开散列可以帮我们解决这个问题 引入 开散列法又叫链地址法(开链法)&#xff0c;首先对关键码集合用散列函数计算散列地址**&#xff0c;具有相同地址的关键码归于同一子…

【HMWeb】HTML使用Leaflet实现本地离线地图Gis应用

下载Leaflet 官网下载&#xff1a;https://leafletjs.com/reference.html CSDN&#xff1a;https://download.csdn.net/download/hmxm6/89291989 选择版本号 添加html文件 加入代码 <!DOCTYPE html> <html lang"en"> <head><meta charset&qu…

富士Apeos 2350 NDA复印机报062 360代码故障

故障描述&#xff1a; 富士Apeos 2350 NDA复印机新机器刚拆箱安装&#xff0c;开机正常&#xff0c;自检扫描头一卡一卡的往前动几下就不动了、扫描灯也不亮扫描头也不能正常复位&#xff1b;按机器的复印键直接报062 360代码&#xff1b; 解答&#xff1a; 此代码为扫描故障&a…

聊天室项目思路

发起群聊&#xff1a; 从好友表选取人发送到服务器&#xff0c;服务器随机生成不重复的群号&#xff0c;存储在数据库&#xff0c;同时建立中间表&#xff0c;处理用户与群聊的关系 申请入群&#xff1a; 输入群号&#xff0c;发消息给服务器&#xff0c;服务器查询是否存在…

笔试强训week4

day1 Q1 难度⭐⭐ 小易的升级之路_牛客题霸_牛客网 (nowcoder.com) 题目&#xff1a; 小易经常沉迷于网络游戏.有一次,他在玩一个打怪升级的游戏,他的角色的初始能力值为 a.在接下来的一段时间内,他将会依次遇见n个怪物,每个怪物的防御力为b1,b2,b3...bn. 如果遇到的怪物防…

17 【Aseprite 作图】参考图和颜色

参考图 Aseprite 作图&#xff0c;“打开 - 一张参考图”&#xff0c;再把参考图拉到右边&#xff0c;就可以得到参考图和缩略图 取消选区 通过“选择 - 取消选择”&#xff0c;可以 取消选区 复制参考图的颜色 打开参考图后&#xff0c;参考图的调色板就会出现参考图所有的…

[Linux_IMX6ULL驱动开发]-GPIO子系统和Pinctrl子系统

目录 Pinctrl子系统的概念 GPIO子系统的概念 定义自己的GPIO节点 GPIO子系统的函数 引脚号的确定 基于GPIO子系统的驱动程序 驱动程序 设备树修改 之前我们进行驱动开发的时候&#xff0c;对于硬件的操作是依赖于ioremap对寄存器的物理地址进行映射&#xff0c;以此来达…

【智能优化算法】蜜獾优化算法(Honey Badger Algorithm,HBA)

蜜獾优化算法(Honey Badger Algorithm,HBA)是期刊“MATHEMATICS AND COMPUTERS IN SIMULATION”&#xff08;IF 3.6&#xff09;的2022年智能优化算法 01.引言 蜜獾优化算法(Honey Badger Algorithm,HBA)受蜜獾智能觅食行为的启发&#xff0c;从数学上发展出一种求解优化问题的…

Jetpack Compose一:初步了解Compose

Intellij IDEA构建Android开发环境 IntelliJ IDEA 2023.2.1 Android开发变化 IDEA配置使用Gradle 新建Compose工程&#xff0c;取名ComposeStudy 可以看到的是IDEA为项目初始化了部分代码 使用Compose开发不再需要使用xml文件来设计布局了 Compose中的Text也不同于Android V…