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父组件提交校验多个子组件
实现功能:在父组件提交事件中校验多个子组件中的form 父组件: <script setup lang"ts">import {ref, reactive} from vueimport childForm from ./childForm.vueimport childForm2 from ./childForm2.vuelet approvalRef ref()let ap…...
系统移植-uboot
uboot概述: 操作系统运行之前运行的一小段代码,用于将软硬件环境初始化到 一个合适的状态,为操作系统的加载和运行做准备(其本身不是操作系统) Bootloader基本功能 1.初始化软硬件环境 2.引导加载linux内核 3. 给lin…...
使用FFmpeg合并多个ts视频文件转为mp4格式
前言 爬取完视频发现都是ts文件,而且都是几百KB的视频片段,.ts 全名叫:MPEG Transport Stream,它是一个万能的多媒体容器,可以装下音频、视频、字幕。有时我们需要将.ts文件转换为其他更加广泛被支持的格式࿰…...
大模型之十二十-中英双语开源大语言模型选型
从ChatGPT火爆出圈到现在纷纷开源的大语言模型,众多出入门的学习者以及跃跃欲试的公司不得不面临的是开源大语言模型的选型问题。 基于开源商业许可的开源大语言模型可以极大的节省成本和加速业务迭代。 当前(2023年11月17日)开源的大语言模型如下&#…...
.Net6 部署到IIS示例
基于FastEndpoints.Net6 框架部署到IIS 环境下载与安装IIS启用与配置访问网站 环境下载与安装 首先下载环境安装程序,如下图所示,根据系统位数选择x86或者x64进行下载安装,网址:Download .NET 6.0。 IIS启用与配置 启用IIS服务 打开控制面板ÿ…...
轻松搭建短域名短链接服务系统,可选权限认证,并自动生成证书认证把nginx的http访问转换为https加密访问,完整步骤和代码
轻松搭建短域名短链接服务系统,可选权限认证,并自动生成证书认证把nginx的http访问转换为https加密访问,完整步骤和代码。 在互联网信息爆炸的时代,网址复杂而冗长,很难在口头告知他人,也难以分享到社交媒体…...
JS 日期格式化
日期格式化 parseTime: // 日期格式化 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年了,一直以为"右键菜单"和"弹出菜单"是不同的。 最近刚刚发现,这两种菜单在定义的时候和消息循环处理程序中并没有什么不同,区别只是在于windows底层显示方式。 如下是右键菜单的显示方式࿱…...
查询数据库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中,确实没有像传统Web应用程序中需要使用web.xml配置文件。对于中文乱码问题,你可以采取以下几种方式来解决: 在application.properties文件中添加以下配置: spring.http.encoding.charsetUTF-8 spring.http.encod…...
京东联盟flutter插件使用方法
目录 1.京东联盟官网注册申请步骤略~2.安卓端插件配置:3.IOS端插件配置4.其它配置5.京东OAuth授权 文档地址:https://baiyuliang.blog.csdn.net/article/details/134444104 京东联盟flutter插件地址:https://pub.dev/packages/jdkit 1.京东联…...
python电影数据可视化分析系统的设计与实现【附源码】
电影数据可视化分析系统的设计与实现 (一)开题报告,就是确定设计(论文)选题之后,学生在调查研究的基础上撰写的研究计划,主要说明设计(论文)研究目的和意义、研究的条件以及如何开展研究等问题,也可以说是对设计(论文)的论证和设…...
SQLMAP --TAMPER的编写
跟着师傅的文章进行学习 sqlmap之tamper脚本编写_sqlmap tamper编写-CSDN博客 这里学习一下tamper的编写 这里的tamper 其实就是多个绕过waf的插件 通过编写tamper 我们可以学会 在不同过滤下 执行sql注入 我们首先了解一下 tamper的结构 这里我们首先看一个最简单的例子…...
美国服务器:全面剖析其主要优点与潜在缺点
服务器是网站搭建的灵魂。信息化的今天,我们仍需要它来为网站和应用程序提供稳定的运行环境。而美国作为全球信息技术靠前的国家之一,其服务器市场备受关注。那么,美国服务器究竟有哪些主要优点和潜在缺点呢? 优点 数据中心基础设施&a…...
验证二叉搜索树
二叉搜索树 二叉查找树(Binary Search Tree),(又:二叉搜索树,二叉排序树)它或者是一棵空树,或者是具有下列性质的二叉树: 若它的左子树不空,则左子树上所有结…...
Ubuntu 18.04无网络连接的n种可能办法
文章目录 网络图标消失,Ubuntu无网络连接VMware上Ubuntu18.04,桥接了多个网卡,其中一个用来上网,均设置为静态ip网络桥接链路没有接对路由不对 树莓派同时使用无线网卡和有线网卡,且一个连接内部局域网,一个…...
MIUI查看当前手机电池容量
MIUI查看当前手机电池容量 1. 按如下步骤操作生成bug报告 2. 按如下操作解压bug报告 Last learned battery capacity...
链动2+1模式:创新营销引领白酒产业新潮流
在当今高度竞争的市场环境中,创新营销模式对于企业的发展至关重要。链动21模式作为一种独特的营销策略,将白酒产品与该模式相结合,充分发挥其优势,通过独特的身份晋升和奖励机制,快速建立销售渠道,提高用户…...
openGauss学习笔记-126 openGauss 数据库管理-设置账本数据库-归档账本数据库
文章目录 openGauss学习笔记-126 openGauss 数据库管理-设置账本数据库-归档账本数据库126.1 前提条件126.2 背景信息126.3 操作步骤 openGauss学习笔记-126 openGauss 数据库管理-设置账本数据库-归档账本数据库 126.1 前提条件 系统中需要有审计管理员或者具有审计管理员权…...
UE 视差材质 学习笔记
视差材质节点: 第一个是高度图, Heightmap Channel就是高度图的灰色通道,在RGBA哪个上面,例如在R上就连接(1,0,0,0),G上就连接(0,1,0,0)逐次类推 去看看对比效果: 这个是有视差效果…...
浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)
✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义(Task Definition&…...
label-studio的使用教程(导入本地路径)
文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...
在rocky linux 9.5上在线安装 docker
前面是指南,后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...
蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练
前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1):从基础到实战的深度解析-CSDN博客,但实际面试中,企业更关注候选人对复杂场景的应对能力(如多设备并发扫描、低功耗与高发现率的平衡)和前沿技术的…...
Spring AI 入门:Java 开发者的生成式 AI 实践之路
一、Spring AI 简介 在人工智能技术快速迭代的今天,Spring AI 作为 Spring 生态系统的新生力量,正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务(如 OpenAI、Anthropic)的无缝对接&…...
Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?
Redis 的发布订阅(Pub/Sub)模式与专业的 MQ(Message Queue)如 Kafka、RabbitMQ 进行比较,核心的权衡点在于:简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...
初探Service服务发现机制
1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能:服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源…...
人工智能 - 在Dify、Coze、n8n、FastGPT和RAGFlow之间做出技术选型
在Dify、Coze、n8n、FastGPT和RAGFlow之间做出技术选型。这些平台各有侧重,适用场景差异显著。下面我将从核心功能定位、典型应用场景、真实体验痛点、选型决策关键点进行拆解,并提供具体场景下的推荐方案。 一、核心功能定位速览 平台核心定位技术栈亮…...
如何在Windows本机安装Python并确保与Python.NET兼容
✅作者简介:2022年博客新星 第八。热爱国学的Java后端开发者,修心和技术同步精进。 🍎个人主页:Java Fans的博客 🍊个人信条:不迁怒,不贰过。小知识,大智慧。 💞当前专栏…...
6.9-QT模拟计算器
源码: 头文件: widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QMouseEvent>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent nullptr);…...
