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://www.mzph.cn/diannao/9829.shtml

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

相关文章

mysql数据库调优篇章1--日志篇

目录 1.认识数据库中日志的作用2.增加mysql数据库中my.ini 基本配置3.增加my.ini中参数配置4.查看已经执行过的sql语句过去执行时间5.找出慢查询的sql6.常用参数查询命令7.认识慢查询日志记录8.认识通用日志记录&#xff08;记录增删改查操作&#xff09;9.认识二进制文件binlo…

一文了解spring事务特性

推荐工具 objectlog 对于重要的一些数据&#xff0c;我们需要记录一条记录的所有版本变化过程&#xff0c;做到持续追踪&#xff0c;为后续问题追踪提供思路。objectlog工具是一个记录单个对象属性变化的日志工具,工具采用spring切面和mybatis拦截器相关技术编写了api依赖包&a…

Day36 单调递增的数字 + 监控二叉树

738 单调递增的数字 题目链接&#xff1a;https://leetcode.cn/problems/monotone-increasing-digits/description/ 当且仅当每个相邻位数上的数字 x 和 y 满足 x < y 时&#xff0c;我们称这个整数是单调递增的。 给定一个整数 n &#xff0c;返回 小于或等于 n 的最大数…

Pointnet++改进即插即用系列:全网首发UIB轻量化模块

简介:1.该教程提供大量的首发改进的方式,降低上手难度,多种结构改进,助力寻找创新点!2.本篇文章对Pointnet++特征提取模块进行改进,加入UIB,提升性能。3.专栏持续更新,紧随最新的研究内容。 目录 1.理论介绍 2.修改步骤 2.1 步骤一 2.2 步骤二 2.3 步骤三

数据结构学习/复习12

一、排序概念与应用 二、插入排序 三、希尔排序 当间隔数为1时则为插入排序 1.一组一组排 2.多组并排 3.间隔数变化直至为1 四、性能测速代码

Java类加载器介绍

在Java中&#xff0c;类加载器是一种动态加载类的机制&#xff0c;它负责在运行时查找、加载和链接类文件。当Java应用程序需要创建某个类的对象时&#xff0c;类加载器会在运行时查找该类对应的.class文件&#xff0c;并将其加载到Java虚拟机中。Java类加载器通常分为三层&…

【Android】Kotlin学习之数据容器(数组for循环遍历)

数组遍历 1. for ( item in arr){…} 2. for ( i in arr.indeces ) {…} (遍历下标) 3. for ((index, item) in arr.withInfex()) {…} (遍历下标和元素) 4. arr.forEach {} ( 遍历元素 ) 5. arr.forEachIndexed{index, item -> …}

Python尝试安装 pyaudio 时遇到的错误信息表示安装过程失败,原因是找不到 Python.h 头文件

环境&#xff1a; Python 3.8.10 WSL2 问题描述&#xff1a; 尝试安装 pyaudio 时遇到的错误信息表示安装过程失败&#xff0c;原因是找不到 Python.h 头文件 error: subprocess-exited-with-error Building wheel for pyaudio (pyproject.toml) did not run successfully…

无人作业控制器--4G/5G通信

一、环境 开发环境&#xff1a;ubuntu 22 ros2 humble 发布运行环境&#xff1a;地平线旭日x3派、arm64 4G 模组&#xff1a; 移远EC20模块 5G 模组&#xff1a;移远RG200U-CN 网络通信模组根据需要选择其中一款&#xff0c; 前期我们使用4G模组&#xff0c;后续迭代因为…

大模型微调之 在亚马逊AWS上实战LlaMA案例(七)

大模型微调之 在亚马逊AWS上实战LlaMA案例&#xff08;七&#xff09; 微调SageMaker JumpStart上的LLaMA 2模型 这是在us-west-2的测试结果。 展示了如何使用SageMaker Python SDK部署预训练的Llama 2模型&#xff0c;并将其微调到你的数据集&#xff0c;用于领域适应或指令…

简单网络管理协议(SNMP)入门

目录 概述 SMI&#xff08;对象命名、数据类型、编码方法&#xff09; 对象命名 数据类型 编码方法 MIB&#xff08;版本、分组、对象定义、变量访问&#xff09; 版本 分组 对象定义 变量访问 SNMP 实现机制与报文分析 协议操作 报文格式 实现机制 验证分析 SN…

【Nginx】如何在 Nginx 中阻止来自特定国家的 IP 地址访问

文章目录 前言一、准备工作二、查看 Nginx 服务器都拥有哪些模块2.1 先查看本地nginx是否有ngx_http_geoip2模块2.2 安装nginx并配置ngx_http_geoip2模块2.2.1下载所需版本的nginx到服务器2.2.2 先安装所需依赖2.2.3 解压文件2.2.4 下载ngx_http_geoip2模块2.2.5 编译安装nginx…

通用型产品发布解决方案(后端环境搭建)

文章目录 后端renren脚手架配置1.解压后放到项目目录下2.新建商品模块1.创建一个新模块 sunliving-commodity2.删除两个不必要的文件3.pom.xml 引入依赖 3.maven进行聚合管理1.将刚才配置的pom.xml文件复制到父项目下并进行修改2.手动将这个pom.xml加入项目&#xff08;如果右下…

算法设计与分析 动态规划/回溯

1.最大子段和 int a[N]; int maxn(int n) {int tempa[0];int ans0;ansmax(temp,ans);for(int i1;i<n;i){if(temp>0){tempa[i];}else tempa[i];ansmax(temp,ans);}return ans; } int main() {int n,ans0;cin>>n;for(int i0;i<n;i) cin>>a[i];ansmaxn(n);co…

算法-解密犯罪时间(回溯求全排列

要求的时间需要晚于当前时间且和当前时间最近。时间串里一共四个数字字符&#xff0c;做全排列即可&#xff0c;使用到回溯算法。把时间串里的“&#xff1a;”剔除后&#xff0c;做回溯爆搜&#xff0c;每取4个字符就判断一次&#xff1a;1.作为时间串是否合法&#xff1b;2.如…

广告的两面性:艺术创造独特性,科学带来确定性

奥美广告的创始人大卫奥格威说&#xff0c;克劳德霍普金斯的著作「科学的广告」值得所有从业者至少读上7遍&#xff0c;否则没有资格进入广告行业。 但其实奥格威和霍普金斯是完全不同类型的广告人&#xff0c;如果用品效合一或者品效协同的概念来区分&#xff0c;奥格威显然是…

H5 处理点击元素高亮、自定义按钮、去除焦点边框

1、设置移动设备上点击元素时出现的高亮颜色 *{-webkit-tap-highlight-color: transparent; }2、如果你想要自定义按钮的样式&#xff0c;你可以使用 -webkit-appearance: none; 来移除按钮的默认样式 .button {-webkit-appearance: none;appearance: none; /* 兼容性更好的通…

光检测器——光纤通信学习笔记七

光检测器 光检测器的基本介绍 作用&#xff1a;把接受到的光信号转换成电信号 光接收器的灵敏度、光源的发光功率和光纤的损耗三者决定了光纤通信的传输距离&#xff1b; 光电二极管 光电转换的基本原理 之前提到&#xff0c;PN结由于内部载流子的扩散运动形成了内部电场&…

操作系统之I/O控制方式

1.程序直接控制方式 &#xff08;1&#xff09;读操作的流程 1&#xff09;CPU向I/O控制器发出读指令。I/O控制器启动&#xff0c;将自身状态置为忙碌态。CPU一直轮询检查I/O控制器的状态 2&#xff09;I/O控制器启动CPU指定的I/O设备&#xff0c;并将该I/O设备的状态置为忙碌…