当前位置: 首页 > news >正文

vue3父组件提交校验多个子组件

实现功能:在父组件提交事件中校验多个子组件中的form

父组件:

<script setup lang="ts">import {ref, reactive} from 'vue'import childForm from './childForm.vue'import childForm2 from './childForm2.vue'let approvalRef = ref()let approvalRef2 = ref()let resultArr= reactive([])//存放子组件的数组let errListMsg =ref("")//用来存储错误提示//这个方法是固定的,用来创建 Promise 实例,为多个组件校验使用const checkForm = (formChild) =>{let result = new Promise((resolve,reject)=>{formChild.validate((valid,fields)=>{if (valid) {console.log('submit');resolve()}else{console.log('error');Object.keys(fields).forEach((v,index)=>{if (index==0) {const PropName = fields[v][0].fieldformChild.scrollToField(PropName)errListMsg.value = fields[v][0].message}})reject()}})})resultArr.push(result)}//提交按钮事件const taskFun = ()=>{//获取该子组件暴露出来的form 的 refconst approvalRefChild = approvalRef.value.formsconst approvalRefChild2 = approvalRef2.value.ruleFormRef//调用上面创建好的方法checkForm(approvalRefChild)checkForm(approvalRefChild2)Promise.all(resultArr).then((results)=>{console.log('这里是接口请求');//校验通过}).catch(err=>{//校验不通过提示console.log(errListMsg.value);})resultArr=[]//每次请求完要清空数组errListMsg.value=""//提示也需要清空}
</script>
<template><childForm ref="approvalRef"></childForm><childForm2 ref="approvalRef2"></childForm2><button @click="taskFun">提交</button>
</template>

子组件一:

这个是表格可以增删改的情况,对表格添加输入校验

<script setup lang="ts">import {ref, reactive} from 'vue'import type { FormInstance } from 'element-plus'const forms = ref<FormInstance>()let info:any = reactive({data:[{name:'1'}]})const formRules = reactive({name: [{ required: true, message: '请输入姓名', trigger: 'change' }],role: [{ required: true, message: '请选择', trigger: 'blur' }]})defineExpose({forms})
</script>
<template><el-form :model="info" ref="forms"><el-tableref="tableRef":data="info.data"border><el-table-column align="center" property="name" label="*姓名"><template #default="{row,$index}"><el-form-item :prop="`data[${$index}].name`" :rules="formRules.name"><el-input placeholder="请输入姓名" v-model="info.data[$index].name" /></el-form-item></template></el-table-column><el-table-column align="center" property="role" label="角色"><template #default="{row,$index}"><el-form-item :prop="`data[${$index}].role`" :rules="formRules.role"><el-input placeholder="请输角色" v-model="info.data[$index].role" /></el-form-item></template></el-table-column></el-table></el-form>
</template>

子组件二:

这个是普通的form表单情况

<template>第二个组件<el-formref="ruleFormRef":model="ruleForm":rules="rules"label-width="120px"class="demo-ruleForm":size="formSize"status-icon><el-form-item label="Activity name" prop="name"><el-input v-model="ruleForm.name" /></el-form-item></el-form></template><script lang="ts" setup>import { reactive, ref } from 'vue'import type { FormInstance, FormRules } from 'element-plus'interface RuleForm {name: string}const formSize = ref('default')const ruleFormRef = ref<FormInstance>()const ruleForm = reactive<RuleForm>({name: 'Hello'})const rules = reactive<FormRules<RuleForm>>({name: [{ required: true, message: '请输入Activity name', trigger: 'blur' },{ min: 3, max: 5, message: '长度再3-5位', trigger: 'blur' },]})defineExpose({ruleFormRef})</script>

注意:

1、子组件中的form要添加ref属性,并使用defineExpose暴露出去,这样父组件才能获取到子组件中的ref,才能进行校验

2、当对表格输入内容做校验时prop和v-model绑定的是同一个才能校验通过

3、当发现校验一直不通过时可以查看控制台打印的的结果,看哪个校验没通过

校验不通过

 

 

相关文章:

vue3父组件提交校验多个子组件

实现功能&#xff1a;在父组件提交事件中校验多个子组件中的form 父组件&#xff1a; <script setup lang"ts">import {ref, reactive} from vueimport childForm from ./childForm.vueimport childForm2 from ./childForm2.vuelet approvalRef ref()let ap…...

系统移植-uboot

uboot概述&#xff1a; 操作系统运行之前运行的一小段代码&#xff0c;用于将软硬件环境初始化到 一个合适的状态&#xff0c;为操作系统的加载和运行做准备&#xff08;其本身不是操作系统&#xff09; Bootloader基本功能 1.初始化软硬件环境 2.引导加载linux内核 3. 给lin…...

使用FFmpeg合并多个ts视频文件转为mp4格式

前言 爬取完视频发现都是ts文件&#xff0c;而且都是几百KB的视频片段&#xff0c;.ts 全名叫&#xff1a;MPEG Transport Stream&#xff0c;它是一个万能的多媒体容器&#xff0c;可以装下音频、视频、字幕。有时我们需要将.ts文件转换为其他更加广泛被支持的格式&#xff0…...

大模型之十二十-中英双语开源大语言模型选型

从ChatGPT火爆出圈到现在纷纷开源的大语言模型&#xff0c;众多出入门的学习者以及跃跃欲试的公司不得不面临的是开源大语言模型的选型问题。 基于开源商业许可的开源大语言模型可以极大的节省成本和加速业务迭代。 当前&#xff08;2023年11月17日)开源的大语言模型如下&#…...

.Net6 部署到IIS示例

基于FastEndpoints.Net6 框架部署到IIS 环境下载与安装IIS启用与配置访问网站 环境下载与安装 首先下载环境安装程序&#xff0c;如下图所示,根据系统位数选择x86或者x64进行下载安装,网址&#xff1a;Download .NET 6.0。 IIS启用与配置 启用IIS服务 打开控制面板&#xff…...

轻松搭建短域名短链接服务系统,可选权限认证,并自动生成证书认证把nginx的http访问转换为https加密访问,完整步骤和代码

轻松搭建短域名短链接服务系统&#xff0c;可选权限认证&#xff0c;并自动生成证书认证把nginx的http访问转换为https加密访问&#xff0c;完整步骤和代码。 在互联网信息爆炸的时代&#xff0c;网址复杂而冗长&#xff0c;很难在口头告知他人&#xff0c;也难以分享到社交媒体…...

JS 日期格式化

日期格式化 parseTime&#xff1a; // 日期格式化 export function parseTime(time, pattern) {if (arguments.length 0 || !time) {return null}const format pattern || {y}-{m}-{d} {h}:{i}:{s}let dateif (typeof time object) {date time} else {if ((typeof time st…...

右键菜单和弹出菜单的区别

接触windows开发10年了&#xff0c;一直以为"右键菜单"和"弹出菜单"是不同的。 最近刚刚发现&#xff0c;这两种菜单在定义的时候和消息循环处理程序中并没有什么不同&#xff0c;区别只是在于windows底层显示方式。 如下是右键菜单的显示方式&#xff1…...

查询数据库DQL

DQL 查询基本语法 -- DQL :基本语法; -- 1查询指定的字段 name entrydate 并返回select name , entrydate from tb_emp;-- 2 查询 所有字段 并返回select id, username, password, name, gender, image, job, entrydate, create_time, update_time from tb_emp;-- 2 查询…...

SpringBoot中文乱码问题解决方案

在Spring Boot中&#xff0c;确实没有像传统Web应用程序中需要使用web.xml配置文件。对于中文乱码问题&#xff0c;你可以采取以下几种方式来解决&#xff1a; 在application.properties文件中添加以下配置&#xff1a; spring.http.encoding.charsetUTF-8 spring.http.encod…...

京东联盟flutter插件使用方法

目录 1.京东联盟官网注册申请步骤略~2.安卓端插件配置&#xff1a;3.IOS端插件配置4.其它配置5.京东OAuth授权 文档地址&#xff1a;https://baiyuliang.blog.csdn.net/article/details/134444104 京东联盟flutter插件地址&#xff1a;https://pub.dev/packages/jdkit 1.京东联…...

python电影数据可视化分析系统的设计与实现【附源码】

电影数据可视化分析系统的设计与实现 (一)开题报告&#xff0c;就是确定设计(论文)选题之后&#xff0c;学生在调查研究的基础上撰写的研究计划&#xff0c;主要说明设计(论文)研究目的和意义、研究的条件以及如何开展研究等问题&#xff0c;也可以说是对设计(论文)的论证和设…...

SQLMAP --TAMPER的编写

跟着师傅的文章进行学习 sqlmap之tamper脚本编写_sqlmap tamper编写-CSDN博客 这里学习一下tamper的编写 这里的tamper 其实就是多个绕过waf的插件 通过编写tamper 我们可以学会 在不同过滤下 执行sql注入 我们首先了解一下 tamper的结构 这里我们首先看一个最简单的例子…...

美国服务器:全面剖析其主要优点与潜在缺点

​  服务器是网站搭建的灵魂。信息化的今天&#xff0c;我们仍需要它来为网站和应用程序提供稳定的运行环境。而美国作为全球信息技术靠前的国家之一&#xff0c;其服务器市场备受关注。那么&#xff0c;美国服务器究竟有哪些主要优点和潜在缺点呢? 优点 数据中心基础设施&a…...

验证二叉搜索树

二叉搜索树 二叉查找树&#xff08;Binary Search Tree&#xff09;&#xff0c;&#xff08;又&#xff1a;二叉搜索树&#xff0c;二叉排序树&#xff09;它或者是一棵空树&#xff0c;或者是具有下列性质的二叉树&#xff1a; 若它的左子树不空&#xff0c;则左子树上所有结…...

Ubuntu 18.04无网络连接的n种可能办法

文章目录 网络图标消失&#xff0c;Ubuntu无网络连接VMware上Ubuntu18.04&#xff0c;桥接了多个网卡&#xff0c;其中一个用来上网&#xff0c;均设置为静态ip网络桥接链路没有接对路由不对 树莓派同时使用无线网卡和有线网卡&#xff0c;且一个连接内部局域网&#xff0c;一个…...

MIUI查看当前手机电池容量

MIUI查看当前手机电池容量 1. 按如下步骤操作生成bug报告 2. 按如下操作解压bug报告 Last learned battery capacity...

链动2+1模式:创新营销引领白酒产业新潮流

在当今高度竞争的市场环境中&#xff0c;创新营销模式对于企业的发展至关重要。链动21模式作为一种独特的营销策略&#xff0c;将白酒产品与该模式相结合&#xff0c;充分发挥其优势&#xff0c;通过独特的身份晋升和奖励机制&#xff0c;快速建立销售渠道&#xff0c;提高用户…...

openGauss学习笔记-126 openGauss 数据库管理-设置账本数据库-归档账本数据库

文章目录 openGauss学习笔记-126 openGauss 数据库管理-设置账本数据库-归档账本数据库126.1 前提条件126.2 背景信息126.3 操作步骤 openGauss学习笔记-126 openGauss 数据库管理-设置账本数据库-归档账本数据库 126.1 前提条件 系统中需要有审计管理员或者具有审计管理员权…...

UE 视差材质 学习笔记

视差材质节点&#xff1a; 第一个是高度图&#xff0c; Heightmap Channel就是高度图的灰色通道&#xff0c;在RGBA哪个上面&#xff0c;例如在R上就连接(1,0,0,0)&#xff0c;G上就连接&#xff08;0,1,0,0&#xff09;逐次类推 去看看对比效果&#xff1a; 这个是有视差效果…...

YSYX学习记录(八)

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

python执行测试用例,allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

AI病理诊断七剑下天山,医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法&#xff1a;使用 MyBatis 的 <foreach> 标签和批处理模式&#xff08;ExecutorType.BATCH&#xff09;。 方法一&#xff1a;使用 XML 的 <foreach> 标签&#xff…...

NXP S32K146 T-Box 携手 SD NAND(贴片式TF卡):驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...

LOOI机器人的技术实现解析:从手势识别到边缘检测

LOOI机器人作为一款创新的AI硬件产品&#xff0c;通过将智能手机转变为具有情感交互能力的桌面机器人&#xff0c;展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家&#xff0c;我将全面解析LOOI的技术实现架构&#xff0c;特别是其手势识别、物体识别和环境…...

Unity中的transform.up

2025年6月8日&#xff0c;周日下午 在Unity中&#xff0c;transform.up是Transform组件的一个属性&#xff0c;表示游戏对象在世界空间中的“上”方向&#xff08;Y轴正方向&#xff09;&#xff0c;且会随对象旋转动态变化。以下是关键点解析&#xff1a; 基本定义 transfor…...

2.3 物理层设备

在这个视频中&#xff0c;我们要学习工作在物理层的两种网络设备&#xff0c;分别是中继器和集线器。首先来看中继器。在计算机网络中两个节点之间&#xff0c;需要通过物理传输媒体或者说物理传输介质进行连接。像同轴电缆、双绞线就是典型的传输介质&#xff0c;假设A节点要给…...

LangChain【6】之输出解析器:结构化LLM响应的关键工具

文章目录 一 LangChain输出解析器概述1.1 什么是输出解析器&#xff1f;1.2 主要功能与工作原理1.3 常用解析器类型 二 主要输出解析器类型2.1 Pydantic/Json输出解析器2.2 结构化输出解析器2.3 列表解析器2.4 日期解析器2.5 Json输出解析器2.6 xml输出解析器 三 高级使用技巧3…...