VUE2用elementUI实现父组件中校验子组件中的表单

需求是VUE2框架用elementUI写复杂表单组件,比如,3个相同功能的表单共用一个提交按钮,把相同功能的表单写成一个子组件,另一个父组件包含子组件的重复调用和一个提交按钮,并且要求提交时校验必填项。

注意:

1.validate函数不传参数就会返回一个promise

2.子组件中写了this.$refs.form?.map...是因为真实项目中el-form是进行了循环的,这里可以自定义修改

3.父组件中要用promise来处理调用子组件的方法

子组件:

<template><el-form ref="form" :model="formData" :rules="formRules" label-width="120px"><el-form-item label="姓名" prop="name"><el-input v-model="formData.name"></el-input></el-form-item><el-form-item label="邮箱" prop="email"><el-input v-model="formData.email"></el-input></el-form-item><!-- 其他表单项 --></el-form>
</template><script>
export default {data() {return {formData: {name: '',email: ''// 其他表单项},formRules: {name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }]// 其他表单项的校验规则}};},methods: {validateForm() {const validatePromises = this.$refs.form?.map(v => {return v.validate();});if (validatePromises) {return Promise.all(validatePromises).then(results => {// 检查结果数组,如果所有项都是 true,则返回 true,否则返回 falsereturn results.every(result => result);}).catch(() => {// 如果有任何验证 Promise 失败,则捕获错误return false;});} else {// 如果 this.$refs.form 不存在,直接返回 false 或抛出错误return false;}}}
};
</script>

 父组件

<template><div><FormComponent v-for="(ref,index) in formRefs" :key="index" :ref="ref"></FormComponent><el-button type="primary" @click="submitForms">提交</el-button></div>
</template><script>
import FormComponent from './FormComponent.vue';export default {data() {return {formRefs: []};},components: {FormComponent},mounted() {// 根据需要调用表单的次数,此处假设为10次for (let i = 0; i < 10; i++) {this.formRefs.push(`form${i + 1}`);}},methods: {async onSubmit() {// 1、pc端:一次性校验所有题Promise.all(this.formRefs?.map(v => {return this.$refs?.[v]?.[0]?.validateForm();})).then(res => {if (res?.every(v => v)) {const formDataList = this.formRefs?.map(v => {return this.$refs?.[v]?.[0]?.form;});// 2、提交问卷console.log('formDataList', formDataList);} else {// 找出所有校验不通过的表单const falseFormList = res.filter(v => !v);// TODO 自定义操作}}).catch(() => {this.$alert('请稍后重试', '提示', {dangerouslyUseHTMLString: true});});}}
};
</script>

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

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

相关文章

【Python进阶】正则表达式、pymysql模块

目录 一、正则表达式的概述 1、基本介绍 2、快速使用re模块 二、正则的常见规则 1、匹配单个字符 2、原始字符串 3、匹配多个字符 4、匹配开头和结尾 5、匹配分组 三、Python与MySQL交互 1、pymysql模块的安装 2、pymysql的操作步骤 3、connection对象 4、cursor…

记录一点mybatis的坑

1. mybatis的分页插件 startPage执行后&#xff0c;紧跟的一个查询语句 会被加上limit对应的参数&#xff0c;然后自动执行clearPage&#xff08;&#xff09;&#xff0c;以免其他语句受到 分页的影响。 但是如果我们没有 执行查询语句&#xff0c;那么&#xff0c;这个分页可…

可重入锁深入学习(有码)

【摘要】 ​今天&#xff0c;梳理下java中的常用锁&#xff0c;但在搞清楚这些锁之前&#xff0c;先理解下 “临界区”。临界区在同步的程序设计中&#xff0c;临界区段活称为关键区块&#xff0c;指的是一个访问共享资源&#xff08;例如&#xff1a;共享设备或是共享存储器&a…

数据湖仓一体(二) 安装kafka

上传安装包到/opt/software目录并解压 [bigdatanode106 software]$ tar -zxvf kafka_2.12-3.5.2.tgz -C /opt/services/ 重命名kafka [bigdatanode106 software]$ mv kafka_2.12-3.5.2 kafka_3.5.2 配置环境变量 [bigdatanode106 ~]$ sudo vim /etc/profile.d/bigdata_…

深度学习调参

此文整理总结github上的一个资料&#xff0c;结尾附上链接。对于工程应用很有现实参考&#xff0c;带入实际工作场景中会有不少的收获。 这份文档旨在帮助工程师和研究人员系统性地优化深度学习模型的性能。它涵盖了从项目启动到模型部署的各个环节&#xff0c;包括&#xff1a…

6、evil box one

低—>中 目标&#xff1a;获取root权限以及2个flag 主机发现 靶机 192.168.1100.40 或者使用fping -gaq 192.168.100.1/24发现主机使用ping的方式。 端口扫描 发现开放了22和80 可以使用-A参数&#xff0c;-A参数会得到更多的扫描细节 访问80端口就是一个apache的基本的…

基于Python/MATLAB长时间序列遥感数据处理及在全球变化、植被物候提取、植被变绿与生态系统固碳分析、生物量估算与趋势分析应用

植被是陆地生态系统中最重要的组分之一&#xff0c;也是对气候变化最敏感的组分&#xff0c;其在全球变化过程中起着重要作用&#xff0c;能够指示自然环境中的大气、水、土壤等成分的变化&#xff0c;其年际和季节性变化可以作为地球气候变化的重要指标。此外&#xff0c;由于…

怎么安装Manim库在Windows环境下的Jupyter Notebook上

Manim 是解释性数学视频的动画引擎。 您可以使用它来制作数学视频&#xff08;或其他字段&#xff09;。也许你们会在有有些平台上会看过特别好看的数学动画&#xff0c;例如 3Blue1Brown等。这些动画特别好看&#xff0c;还特别丝滑&#xff0c;基本找不到太大的毛病。 我当初…

在 WebSocket 连接建立之前进行身份验证

要在 WebSocket 连接建立之前进行身份验证,可以采用以下常见方法: 基于 token 的鉴权:客户端在连接请求中携带 token,服务器端接收后验证 token 的合法性。例如,使用 ws 库时,可以在建立 WebSocket 连接时设置请求头: const socket = new WebSocket(ws://localhost:…

推荐 2 个 硬核的 AI 开源项目

01 AI 助手在你的终端中配对编程 Aider 由 Paul Gauthier 精心打造的开源AI配对编程工具&#xff0c;已经在GitHub上赢得了超过 12.8k 颗星星&#xff0c;人气爆棚&#xff01; 这不仅仅是个工具&#xff0c;它是你在终端中的 AI 编程伙伴&#xff0c;帮你编辑存储在本地 Git 仓…

mavsdk_server安卓平台编译

1.下载好mavsdk并进入mavsdk目录 2.生成docker安卓平台文件 docker run --rm dockcross/android-arm64 >./dockcross-android-arm64 3.生成makefile ./dockcross-android-arm64 cmake -DCMAKE_BUILD_TYPERelease -DBUILD_MAVSDK_SERVERON -DBUILD_SHARED_LIBSOFF -Bbuild/…

JS进阶-异常处理

学习目标&#xff1a; 掌握异常处理 学习内容&#xff1a; throw抛异常try/catch捕获异常debugger throw抛异常&#xff1a; 异常处理是预估代码执行过程中可能发生的错误&#xff0c;然后最大程度的避免错误的发生导致整个程序无法继续运行。 <title>throw抛异常</…

用C在安卓手机上开发

在安卓手机上进行C语言开发需要一些特定的工具和设置。通常&#xff0c;C语言用于编写安卓的底层代码&#xff0c;如性能关键的模块或与硬件直接交互的部分。我们可以使用Android NDK&#xff08;Native Development Kit&#xff09;来开发这些部分。以下是如何在安卓手机上使用…

前端面试题-怎样获取 url 地址栏 ? 后面的查询字符串,并以键值对形式放到对象里面

哈喽小伙伴们大家好!今天继续更新面试题系列文章 以百度为例&#xff1a; 我们以百度搜索掘金&#xff0c;url 为以下格式 https://cn.bing.com/search?q%E7%A8%80%E5%9C%9F%E6%8E%98%E9%87%91&formANNTH1&refig668f422a37c343b6b0f4ac940f65d043&pcEDGENTP&am…

OceanBase 配置项系统变量实现及应用详解(2):系统变量的定义及使用场景

在上一篇博客&#xff0c;配置项的定义及使用方法&#xff0c;详细阐述了配置项的概念及其基本应用方式&#xff0c;这些配置项能够调控集群或租户的行为方式。然而&#xff0c;在实际使用OceanBase的过程中&#xff0c;我们有时仅希望针对当前会话调整某些行为特性&#xff0c…

免费的AI抠图工具 毫秒级抠图 离线可用 -鲜艺AI抠图

鲜艺AI抠图是一款免费的AI抠图工具&#xff0c;不登录、不联网&#xff0c;内嵌 AI 模型&#xff0c;快至毫秒级抠图&#xff0c;支持批量抠图&#xff0c;支持点击按钮选择图片、拖入图片、粘贴图片、粘贴图片链接、从网页拖入图片&#xff0c;支持Windows和macos&#xff0c;…

一次业务的批量数据任务的处理优化

文章目录 一次业务的批量数据任务的处理优化业务背景1.0版本 分批处理模式2.0版本 平衡任务队列模式3.0版本 优化调度平衡任务队列模式总结 一次业务的批量数据任务的处理优化 业务背景 一个重新生成所有客户的财务业务指标数据的批量数据处理任务。 1.0版本 分批处理模式 …

使用 NumPy 及其相关库(如 pandas、scikit-learn 等)时,由于 NumPy 的版本不兼容或者某些依赖库与 NumPy 的版本不匹配

题意&#xff1a; numpy.dtype size changed, may indicate binary incompatibility. Expected 96 from C header, got 88 from PyObject 问题背景&#xff1a; I want to call my Python module from the Matlab. I received the error: Error using numpy_ops>init thi…

Java中的List集合

一、ArrayLIst集合 ArrayList的特点 ArrayList实现了Collection接口ArrayList内部封装了一个Object类型的对象&#xff0c;初始长度为10&#xff0c;且长度可变ArrayList集合使用数组实现所以查询快&#xff0c;但是增删慢(因为需要移动元素)ArrayList是不能保证线程安全的 …

戴尔inspiron如何独显直连?

&#x1f3c6;本文收录于《CSDN问答解惑-专业版》专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收…