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

news2025/1/12 9:56:53

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

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

页面内容:

<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://www.coloradmin.cn/o/1661178.html

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

相关文章

基于springboot+vue+Mysql的体质测试数据分析及可视化设计

开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;…

Oracle count的优化-避免全表扫描

Oracle count的优化-避免全表扫描 select count(*) from t1; 这句话比较简单&#xff0c;但很有玄机&#xff01;对这句话运行的理解&#xff0c;反映了你对数据库的理解深度&#xff01; 建立实验的大表他t1 SQL> conn scott/tiger 已连接。 SQL> drop table t1 purge…

OpenAI 正在开发一种可以防止版权诉讼的工具

OpenAI 正在开发一种名为 Media Manager 的工具&#xff0c;该工具将使内容创建者和所有者能够确定他们是否愿意将自己的内容用于 ML 研究和 AI 模型训练。 Media Manager 将做什么&#xff1f; 明年推出的 Media Manager 将使内容创作者和所有者能够更好地控制他们的工作是否…

Java学习第05天-编程思维与编程能力

文章目录 综合应用案例&#xff1a;找素数数组元素的复制数字加密模拟双色球 综合应用 涉及的知识点&#xff1a; 变量、数组运算符&#xff1a;基本运算符、关系运算符、逻辑运算符流程控制&#xff1a;if、switch、for、while、死循环、循环嵌套跳转关键字&#xff1a;break、…

day5Qt作业

服务器端 #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);//准备组件&#xff0c;初始化组件状态this->setFixedSize(800,600);chatwidget new QListWidge…

Box86源码解读记录

1. 背景说明 Github地址&#xff1a;https://github.com/ptitSeb/box86 官方推荐的视频教程&#xff1a;Box86/Box64视频教程网盘 2. 程序执行主体图 Box86版本: Box86 with Dynarec v0.3.4 主函数会执行一大堆的初始化工作&#xff0c;包括但不限于&#xff1a;BOX上下文 …

三层交换机静态路由连通实验

静态路由是一种手动配置路由表的方式&#xff0c;网络管理员需要手动指定网络中的每一个路由器下一跳路由器的地址&#xff0c;以及到达目的网络的最短路径。静态路由的路由表不会自动更新&#xff0c;如果网络拓扑发生了变化&#xff0c;管理员需要手动更改路由表。 实验拓扑图…

信息系统架构模型_1.单机应用模式和客户机/服务器模式

1.单机应用模式&#xff08;Standalone&#xff09; 单机应用系统是最简单的软件结构&#xff0c;是指运行在一台物理机器上的独立应用程序。这些软件系统&#xff0c;从今天的软件架构上来讲&#xff0c;是很简单&#xff0c;是标准的单机系统。当然至今&#xff0c;这种复杂的…

面向对象 03:类与对象的创建、初始化和使用,通过 new 关键字调用构造方法,以及创建对象过程的内存分析

一、前言 记录时间 [2024-05-10] 系列文章简摘&#xff1a; Java 笔记 01&#xff1a;Java 概述&#xff0c;MarkDown 常用语法整理 Java 笔记 11&#xff1a;Java 方法相关内容&#xff0c;方法的设计原则&#xff0c;以及方法的定义和调用 面向对象 01&#xff1a;Java 面向对…

数学:人工智能领域的基石与灵魂

在科技日新月异的今天&#xff0c;人工智能&#xff08;AI&#xff09;已经渗透到了我们生活的方方面面&#xff0c;从智能家居、智能医疗到自动驾驶、智能客服&#xff0c;AI无处不在。然而&#xff0c;当我们赞叹于AI的神奇时&#xff0c;却往往忽视了其背后的推动力——数学…

Leetcode—2105. 给植物浇水 II【中等】

2024每日刷题&#xff08;131&#xff09; Leetcode—2105. 给植物浇水 II 实现代码 class Solution { public:int minimumRefill(vector<int>& plants, int capacityA, int capacityB) {int size plants.size();int i 0;int j size - 1;int capA capacityA;in…

结合创新!通道注意力+UNet,实现高精度分割

在U-Net网络中加入通道注意力机制能显著提升模型的性能&#xff01; 具体点说是在U-Net的卷积层之后添加一个通道注意力模块&#xff0c;这样这个模块可以学习不同通道之间的权重&#xff0c;并根据这些权重对通道进行加权&#xff0c;从而增强重要通道的特征表示。 这种结合…

【WebGIS实例】(14)MapboxGL 加载地形高程数据

前言 官网示例&#xff1a;Add 3D terrain to a map | Mapbox GL JS | Mapbox 大佬博客&#xff1a;Mapbox GL基础&#xff08;七&#xff09;&#xff1a;地形数据的处理与加载 (jl1mall.com) 加载Mapbox地形数据 map.once(style.load, () > {map.addSource(mapbox-dem,…

常见扩频系统的基础概念和模型

扩频系统是一种通信技术&#xff0c;它通过将信号的频谱扩展到一定程度来实现传输&#xff0c;这种系统的设计和实现涉及到多种不同的方法和技术。 扩频系统的主要特点和好处包括&#xff1a; 抗干扰能力强&#xff1a;由于信号被扩展到较宽的频带上&#xff0c;单位带宽内的功…

代码随想录算法训练营第六十二天|503.下一个更大元素II、42.接雨水

代码随想录算法训练营第六十二天|503.下一个更大元素II、42.接雨水 503.下一个更大元素II 给定一个循环数组 nums &#xff08; nums[nums.length - 1] 的下一个元素是 nums[0] &#xff09;&#xff0c;返回 nums 中每个元素的 下一个更大元素 。 数字 x 的 下一个更大的元…

jenkins使用gitLab(极狐)认证登陆

jenkins安装 GitLab Authentication插件 我因为java版本和最新GitLab Authentication 1.19版本不兼容&#xff0c;选择了本地安装 找个历史版本1.13版本&#xff0c;然后下载到电脑上 - 本地上传插件并安装 在极狐上创建一个应用 - 配置应用信息 应用名&#xff1a;jenkinsLo…

GAMMA Lab——知识图谱和LLM大模型

图机器学习的发展与分类 图基础模型 LLM基础模型 GNN LLM 前沿工作

【Web后端】servlet基本概念

1.ServletAPI架构 HttpServlet继承GenericServletGenericServlet实现了Servlet接口&#xff0c;ServletConfig接口,Serializable接口自定义Servlet继承HttpServlet 2.Servlet生命周期 第一步&#xff1a;容器加载Servlet第二步&#xff1a;调用Servlet的无参构造方法&#xf…

Oracle -在线回缩表

conn scott/tiger DROP TABLE EMP1 PURGE; CREATE TABLE EMP1 AS SELECT * FROM EMP; alter table emp1 enable row movement; -- 启动回缩特性 insert into emp1 select * from emp1; / / commit; -- 增加到14000行 -- 分析表的结构 analyze table emp1 comput…

mysql从库SHOW SLAVE STATUS字段详解

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 mysql从库SHOW SLAVE STATUS字段详解 前言输出字段展示字段说明 前言 在数据库的舞台上&#xff0c;主从同步就像是一场华丽的舞蹈&#xff0c;而SHOW SLAVE STATUS命令则是这场舞蹈的灯光&#xff0…