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)逐次类推 去看看对比效果: 这个是有视差效果…...
Python|GIF 解析与构建(5):手搓截屏和帧率控制
目录 Python|GIF 解析与构建(5):手搓截屏和帧率控制 一、引言 二、技术实现:手搓截屏模块 2.1 核心原理 2.2 代码解析:ScreenshotData类 2.2.1 截图函数:capture_screen 三、技术实现&…...
Linux链表操作全解析
Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表?1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...
云计算——弹性云计算器(ECS)
弹性云服务器:ECS 概述 云计算重构了ICT系统,云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台,包含如下主要概念。 ECS(Elastic Cloud Server):即弹性云服务器,是云计算…...
简易版抽奖活动的设计技术方案
1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...
ssc377d修改flash分区大小
1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...
爬虫基础学习day2
# 爬虫设计领域 工商:企查查、天眼查短视频:抖音、快手、西瓜 ---> 飞瓜电商:京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空:抓取所有航空公司价格 ---> 去哪儿自媒体:采集自媒体数据进…...
腾讯云V3签名
想要接入腾讯云的Api,必然先按其文档计算出所要求的签名。 之前也调用过腾讯云的接口,但总是卡在签名这一步,最后放弃选择SDK,这次终于自己代码实现。 可能腾讯云翻新了接口文档,现在阅读起来,清晰了很多&…...
MySQL 8.0 事务全面讲解
以下是一个结合两次回答的 MySQL 8.0 事务全面讲解,涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容,并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念(ACID) 事务是…...
Windows安装Miniconda
一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...
多模态图像修复系统:基于深度学习的图片修复实现
多模态图像修复系统:基于深度学习的图片修复实现 1. 系统概述 本系统使用多模态大模型(Stable Diffusion Inpainting)实现图像修复功能,结合文本描述和图片输入,对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...
