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…

数据结构学习/复习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…

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

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

【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…

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

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

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

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

Hive Windows Functions 窗口函数

Hive Windows Functions 窗口函数 在 Hive 中&#xff0c;窗口函数&#xff08;Window Functions&#xff09;用于在查询结果中执行聚合、排序和分析操作&#xff0c;而无需将数据分组。窗口函数允许你在查询结果中的一组行上执行计算&#xff0c;而不会改变原始数据的行数&am…

Vue3知识总结-1

前面学习一段时间的前端&#xff0c;但是没有进行过太多的练习&#xff0c;并且对于里面一些重要的知识点也没有去着重的记忆&#xff0c;所以打算在学习Vue3的时候&#xff0c;做一些笔记&#xff0c;方便后面翻看。这个笔记会对于学习一些做一些&#xff0c;而不是一个整体的…

前端之深拷贝

前提&#xff1a; 就是在实际开发中&#xff0c;我有一个编辑的弹窗&#xff0c;可以查看和编辑&#xff0c;因为弹窗里面是一个步骤条&#xff0c;点击下一步就要向对应的接口发送请求&#xff0c;考虑到就比如我点击下一步&#xff0c;此次表箱信息其实不需要修改&#xff0…

推荐 6 个超好用的 iterm2 zsh 插件

大家好啊&#xff0c;今天给大家分享几个我日常使用的 iterm2 插件&#xff0c;每一个都很有用&#xff0c;希望能给帮助你提高使用命令行的效率&#xff5e; zsh-autosuggestions 插件地址&#xff1a;https://github.com/zsh-users/zsh-autosuggestions 效果展示 当你输入…

AI中转站计费平台系统源码一站式解决方案安装说明

AI中转站计费平台系统源码一站式解决方案安装说明 功能 | Features AI 联网功能 AI online searching service 多账户均衡负载 Multi-account load balancing HTTP2 Stream 实时响应功能 HTTP2 Stream real-time response function 节流和鉴权体系 Throttling and authenticati…

【17-Ⅱ】Head First Java 学习笔记

HeadFirst Java 本人有C语言基础&#xff0c;通过阅读Java廖雪峰网站&#xff0c;简单速成了java&#xff0c;但对其中一些入门概念有所疏漏&#xff0c;阅读本书以弥补。 第一章 Java入门 第二章 面向对象 第三章 变量 第四章 方法操作实例变量 第五章 程序实战 第六章 Java…

开源代码分享(28)-含分布式光伏的配电网集群划分和集群电压协调控制

参考文献&#xff1a; [1] Chai Y , Guo L , Wang C ,et al.Network Partition and Voltage Coordination Control for Distribution Networks With High Penetration of Distributed PV Units[J].IEEE Transactions on Power Systems, 2018:3396-3407.DOI:10.1109/TPWRS.2018…

基于微信小程序的校园二手交易平台设计与实现(论文+源码)_kaic

基于微信小程序的校园二手交易平台 设计与实现 摘 要 随着绿色低碳消费和循环经济的理念越来越深入人心,大学生二手商品市场发展迅猛&#xff0c;而大部分二手交易平台运输方式与收售方式对于大学生用户群体并不适用&#xff0c;所以急需一款针对大学生二手商品交易的软件&…