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、当发现校验一直不通过时可以查看控制台打印的的结果,看哪个校验没通过

校验不通过

 

 

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

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

相关文章

图像分割方法

常见的图像分割方法有以下几种&#xff1a; 1.基于阈值的分割方法 灰度阈值分割法是一种最常用的并行区域技术&#xff0c;它是图像分割中应用数量最多的一类。阈值分割方法实际上是输入图像f到输出图像g的如下变换&#xff1a; 其中&#xff0c;T为阈值&#xff1b;对于物体的…

论文阅读:“iOrthoPredictor: Model-guided Deep Prediction of Teeth Alignment“

文章目录 IntroductionMethodologyProblem FormulationConditional Geometry GenerationTSynNetAligned Teeth Silhouette Maps Generation ResultsReferences Github 项目地址&#xff1a;https://github.com/Lingchen-chen/iOrthopredictor Introduction 这篇文章提出了一种…

国家开放大学平时作业训练题

卷代号&#xff1a;1400 机器人技术及应用 参考试题 一、单项选择题&#xff08;每小题3分&#xff0c;共45分&#xff09; 1.在变径轮和变形车轮的设计中&#xff0c;借鉴了&#xff08; &#xff09;的设计&#xff0c;使得车轮可以主动变形进行越障。 A.滑块机构 …

golang学习笔记——日志记录

文章目录 日志与错误log包记录到文件记录框架Contextual LoggingLeveled LoggingSetting Global Log Level Error Logging 日志与错误 通常&#xff0c;发生错误时&#xff0c;最终用户只会看到一条消息&#xff0c;指示程序出现问题。日志是简单错误消息以外的更多信息。 lo…

zookeeper学习记录

本文Java代码地址&#xff1a; https://gitee.com/blackjie_1/ljUp/tree/master/zookeeperDemo 个人博客网站&#xff1a;什么是快乐 基于docker 安装 拉取zookeeper 3.4.10 docker pull zookeeper:3.4.10启动服务端 docker run -d -p 2181:2181 -v /root/docker/zookeepe…

Flutter笔记:Matrix4矩阵变换与案例

Flutter笔记 Matrix4矩阵变换及其案例 作者&#xff1a;李俊才 &#xff08;jcLee95&#xff09;&#xff1a;https://blog.csdn.net/qq_28550263 邮箱 &#xff1a;291148484163.com 本文地址&#xff1a;https://blog.csdn.net/qq_28550263/article/details/134474764 【简介…

【OpenCV】仿射变换中cv2.estimateAffine2D 的原理

目录 一、介绍 二、仿射变换矩阵 (M) 1.M中六个元素的说明 2.计算旋转角度 3.M的计算过程 三、输出状态 (inliers) 四、错切参数 1.错切参数的定义 2.错切参数例子 &#xff08;1&#xff09;水平错切 &#xff08;2&#xff09;垂直错切 一、介绍 cv2.estimateAffi…

深度学习系列54:使用 MMDETECTION 和 LABEL-STUDIO 进行半自动化目标检测标注

参考https://mmdetection.readthedocs.io/zh-cn/latest/user_guides/label_studio.html&#xff0c;这里进行简要概述&#xff1a; 1. 启动目标检测服务 在mmdetection文件夹中&#xff0c;执行 label-studio-ml start projects/LabelStudio/backend_template --with \ conf…

WIFI版本云音响设置教程腾讯云平台版本

文章目录 WIFI版本云音响设置教程腾讯云平台版本一、申请设备三元素1.腾讯云物联网平台2.创建产品3.设置产品参数4.添加设备5.获取三元素 二、设置设备三元素1.打开MQTTConfigTools2.计算MQTT参数3.使用windows电脑的WIFI连接到设备热点4.设置参数 三、腾讯云物联网套件协议使用…

gin相关操作--一起学习921190764

gin官方文档 https://gin-gonic.com/docs/quickstart/1. 安装 go get -u github.com/gin-gonic/ginhttps://github.com/gin-gonic/gin简单入门 package mainimport ("github.com/gin-gonic/gin""net/http" )func pong(c *gin.Context) {//c.JSON(http.S…

.NET 6 在已知拓扑路径的情况下使用 Dijkstra,A*算法搜索最短路径

📢欢迎点赞 :👍 收藏 ⭐留言 📝 如有错误敬请指正,赐人玫瑰,手留余香!📢本文作者:由webmote 原创📢作者格言:新的征程,我们面对的不仅仅是技术还有人心,人心不可测,海水不可量,唯有技术,才是深沉黑夜中的一座闪烁的灯塔 !背景介绍 突然闯到路径搜索算法里…

Linux入门必备指令

Linux学习之路起始篇——Linux基本指令 文章目录 Linux学习之路起始篇——Linux基本指令**一、ls指令****二、pwd命令****三、cd命令****四、touch指令****五、mkdir命令****六、rm命令****七、man 命令****八、cp命令****九、mv命令****10、cat 指令****十一、tac命令** 前言&…

[机缘参悟-119] :反者道之动与阴阳太极

目录 一、阴阳对立、二元对立的规律 1.1 二元对立 1.2 矛盾的对立与统一 二、阴阳互转、阴阳变化、变化无常 》无序变化和有序趋势的规律 三、阴阳合一、佛魔一体、善恶同源 四、看到积极的一面 五、反者道之动 5.1 概述 5.2 "否极泰来" 5.3 “乐极生悲”…

I.MX6ULL开发笔记(一)——环境搭建、镜像烧录、网络连接

本系列为使用野火IMX6ULL开发的学习笔记&#xff0c;使用的开发板为如下&#xff1a; 具有的硬件资源有如下&#xff1a; 文章目录 一、环境搭建Win11安装WSL安装串口驱动安装串口工具安装Ubuntu与windows文件互传 二、镜像烧录修改串口终端登录前信息 三、fire-config工具配…

今年跳槽成功测试工程师原来是掌握了这3个“潜规则”

随着金九银十逐渐进入尾声&#xff0c;还在观望机会的朋友们已经开始焦躁&#xff1a;“为什么我投的简历还没有回音&#xff1f;要不要趁现在裸辞好好找工作&#xff1f;” “金九银十”作为人们常说的传统“升职加薪”的黄金季节&#xff0c;也是许多人跳槽的理想时机。然而…

一个完备的手游地形实现方案

一、地形几何方案&#xff1a;Terrain 与 Mesh 1.1 目前手游主流地形几何方案分析 先不考虑 LOD 等优化手段&#xff0c;目前地形的几何方案选择有如下几种&#xff1a; 使用 Unity 自带的 Terrain使用 Unity 自带的 Terrain&#xff0c;但是等美术资产完成后使用工具转为 M…

C语言前瞻

文章目录 C语言基础简介编译方式分布编译示例流程一步编译 代码运行运行结果展示实际代码 C语言基础简介 关于C语言的书籍&#xff0c;文章有很多。C的历史我不赘述&#xff0c;只讲C语言的基础语法和使用&#xff0c;帮助大家入门&#xff0c;同时也是自己学习过程的一个回顾。…

HandBrake :MacOS专业视频转码工具

handbrake 俗称大菠萝&#xff0c;是一款免费开源的视频转换、压缩软件&#xff0c;它几乎支持目前市面上所能见到的所有视频格式&#xff0c;并且支持电脑硬件压缩&#xff0c;是一款不可多得的优秀软件 优点 ∙Windows, Linux, Mac 三平台支持 ∙开源、免费、无广告 ∙支…

Redis-高性能原理剖析

redis安装 下载地址&#xff1a;http://redis.io/download 安装步骤&#xff1a; # 安装gcc yum install gcc# 把下载好的redis-5.0.3.tar.gz放在/usr/local文件夹下&#xff0c;并解压 wget http://download.redis.io/releases/redis-5.0.3.tar.gz tar -zxvf redis-5.0.3.tar…

.NET 8 Video教程介绍(开篇)

教程简介 本文将简单描述视频网站教程&#xff0c;视频网站是一个类似于腾讯视频一样的网站&#xff0c;视频资源用户自己上传&#xff0c;然后提供友好的界面查看视频和搜索视频&#xff0c;并且提供管理页面对于视频进行管理&#xff0c;我们将使用Blazor作为前端&#xff0…