关于vue elementUi校验slot插槽中的表单项

项目场景:在父组件表单中使用子组件,并使用子组件插槽功能来管理父组件的单个表单项

重点提示:这里要明确一个概念,凡是在组件内插槽的内容都属于组件管理,因此,要校验父组件使用子组件的slot插槽展示表单项,那么这个表单项的校验规则要放在子组件的表单数据中进行管理和校验

解决方案

这里涉及到作用域具名插槽功能,用来将子组件的表单数据传递给父组件

// 子组件
// 表单管理,比如父组件的slot表单项字段是customField,数据源分传递和子组件定义,自行选择<el-form ref="formRef" :model="formData" :rules="rules"><!-- 其他表单项... --><el-form-item prop="customField"><!-- 作用域具名插槽,name可以自定义,与父组件一致即可 --><slot name="customField" :formData="formData"></slot></el-form-item><!-- 其他表单项... -->
</el-form>export default {props: {// 数据源1:使用父组件传递的formData: {type: Object,default: () => ({})}},data() {return {// 数据源2:使用子组件自定义的formData: {customField},rules: {customField: [{ required: true, message: '此字段为必填项', trigger: 'blur' }]}};},methods: {// 子组件保存提交校验validateForm() {this.$refs.formRef.validate((valid) => {if (valid) {console.log('表单验证通过');// 执行后续逻辑} else {console.log('表单验证失败');}});}}
};
// 父组件 // 数据源1
<child-component :formData="parentFormData"><template #customField="{ formData }"><el-input v-model="formData.customField"></el-input></template>
</child-component>// 数据源2
<child-component><template #customField="{ formData }"><el-input v-model="formData.customField"></el-input></template>
</child-component>

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

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

相关文章

Python将Markdown格式转为HTML:轻松实现博客文章的自动化处理

哈喽&#xff0c;大家好&#xff0c;我是木头左&#xff01; 引言 编写一篇高质量的博客文章并非易事&#xff0c;尤其是在排版和格式方面。Markdown作为一种轻量级的标记语言&#xff0c;为博主们提供了一种简洁、高效的写作方式。而Python作为一门强大的编程语言&#xff0c…

反射的原理和操作

反射是框架设计的灵魂 &#xff08;使用的前提条件&#xff1a;必须先得到代表的字节码的Class&#xff0c;Class类用于表示.class文件&#xff08;字节码&#xff09;&#xff09; 在Java中&#xff0c;反射是指在运行时动态地获取、检查和操作类、对象、方法和属性的能力。J…

本地快速部署 SuperSonic

本地快速部署 SuperSonic 0. 引言1. 本地快速部署 supersonic2. 访问 supersonic3. 支持的数据库4. github 地址 0. 引言 SuperSonic融合Chat BI&#xff08;powered by LLM&#xff09;和Headless BI&#xff08;powered by 语义层&#xff09;打造新一代的BI平台。这种融合确…

C++ 66 之 类模版

#include <iostream> #include <string> using namespace std;// 习惯性 < >中 类模板用class 普通的函数模板就用typename // template<class NAMETYPE, class AGETYPE> template<class NAMETYPE, class AGETYPE int> // 可以设置默认的类型值…

c语言单元测试构建

前言 查阅gtest、ceedling、unity、cmock等测试框架,在项目集成实践。 Ceedling安装和使用(放弃) 使用总结:Ceedling使用的确非常方便,但是由于toolchain的设置的文档说明和sample缺失,尝试了更新toolchain失败而告终。同时ceedling编译后需要在目标机器环境下运行才能生效…

【数据结构C++】表达式求值(多位数)课程设计

&#x1f4da;博客主页&#xff1a;Zhui_Yi_ &#x1f50d;&#xff1a;上期回顾&#xff1a;图 ❤️感谢大家点赞&#x1f44d;&#x1f3fb;收藏⭐评论✍&#x1f3fb;&#xff0c;您的三连就是我持续更新的动力❤️ &#x1f387;追当今朝天骄&#xff0c;忆顾往昔豪杰。 …

elementUI实现上传excel文件并传给后端

我们选择一个按钮来实现上传&#xff0c;点击上传按钮&#xff0c;可从本地选择文件上传&#xff0c;确定后传递给后端。 首先&#xff0c;封装一个按钮&#xff1a; <el-uploadstyle"display: inline-block"action"string":limit"1":file-li…

使用ASM为一个类增加属性工具类

使用ASM可以方便的访问和修改一个类&#xff0c;或者在JVM载入前动态更新一个类也是可以的&#xff0c;如下&#xff0c; 为一个类动态增加一个属性&#xff0c;类Student如下&#xff1a; public class Student {private int age;private String name;public int getAge() {…

【机器学习】第7章 集成学习(小重点,混之前章节出题但小题)

一、概念 1.集成学习&#xff0c;顾名思义&#xff0c;不是一个玩意&#xff0c;而是一堆玩意混合到一块。 &#xff08;1&#xff09;基本思想是先 生成一定数量基学习器&#xff0c;再采用集成策略 将这堆基学习器的预测结果组合起来&#xff0c;从而形成最终结论。 &#x…

第2天:变量与数据类型

学习目标 理解变量的概念和命名规则掌握Python中的基本数据类型学会进行数据类型转换 学习内容 1. 变量 变量是存储数据的容器&#xff0c;可以把数据保存在内存中供程序使用。在Python中&#xff0c;变量的声明和赋值非常简单&#xff0c;不需要像Java那样显式声明类型。 …

pdf怎么压缩到2m以内或5m以内的方法

PDF作为一种广泛使用的文档格式&#xff0c;已经成为我们工作和生活中不可或缺的一部分。然而&#xff0c;有时候PDF文件内存会比较大&#xff0c;给我们的存储和传输带来了很大的不便。因此&#xff0c;学会压缩 PDF 文件是非常必要的。 打开"轻云处理pdf官网"&…

【Python教程】压缩PDF文件大小

压缩 PDF 文件能有效减小文件大小并提高文件传输的效率&#xff0c;同时还能节省计算机存储空间。除了使用一些专业工具对PDF文件进行压缩&#xff0c;我们还可以通过 Python 来执行该操作&#xff0c;实现自动化、批量处理PDF文件。 本文将分享一个简单有效的使用 Python 压缩…

Python异常处理最佳实践与文件读取异常示例

Python异常处理最佳实践与文件读取异常示例 一、引言 在Python编程中&#xff0c;异常处理是一个至关重要的部分。它能够帮助我们识别和处理程序运行时出现的错误&#xff0c;确保程序的稳定性和可靠性。本文将介绍Python中处理异常的最佳实践&#xff0c;并通过一个文件读取…

【Qt6.3 基础教程 07】信号与槽:Qt编程的心脏

文章目录 前言信号与槽机制简介信号&#xff08;Signals&#xff09;槽&#xff08;Slots&#xff09; 如何使用信号与槽连接信号和槽创建自定义槽使用Lambda表达式 信号与槽的高级用法结论 前言 在任何现代图形用户界面(GUI)框架中&#xff0c;响应用户行为是最重要的功能之一…

js语法---理解防抖原理和实现方法

什么是防抖&#xff08;节流&#xff09; 在实际的网页交互中&#xff0c;如果一个事件高频率的触发&#xff0c;这会占用很多内存资源&#xff0c;但是实际上又并不需要监听触发如此多次这个事件&#xff08;比如说&#xff0c;在抢有限数量的优惠券时&#xff0c;用户往往会提…

Scott Brinker:API对今天的Martech用户来说「非常重要」 ,但它们对即将到来的人工智能代理浪潮至关重要

API在Martech中非常重要 猜一猜空格应该填什么&#xff1a; _______之于AI代理就像数据之于AI模型 正如你可能从我的标题猜到的那样&#xff0c;答案是API。让我们讨论一下为什么…… 数据是人工智能模型的差异化 在过去的一年半里&#xff0c;人工智能疯狂的超级炒作周期…

LVS+Keepalived 群集部署111

引言 Keepalived 是一个基于VRRP协议来实现的LVS服务高可用方案&#xff0c;可以解决静态路由出现的单点故障问题。

LVS集群,(2)DR模式

直连路由&#xff0c;DR模式&#xff0c;采用半开放式的网络结构&#xff0c;与TUN模式的结构类似&#xff0c;但是DR模式中与调度器应在同一个物理网络中&#xff0c;需要在同一个网段内。 直连路由模式也是LVS默认的模式&#xff0c;应用最广泛&#xff0c;由于是在同一个网…

GPT-4V 和 Gemini对比

GPT-4V 和 Gemini 的原理及对比 GPT-4V和Gemini都是当代领先的多模态AI模型&#xff0c;但它们在设计原理、实现方法和应用场景上有一些显著的区别。下面将详细解释这些模型的原理&#xff0c;并比较它们的优缺点。 GPT-4V 的原理 GPT-4V 是 OpenAI 开发的 GPT-4 的多模态版本…

Repetition Improves Language Model Embeddings论文阅读笔记

文章提出了一种提高decoder-only LLM的embedding能力的方法&#xff0c;叫echo embeddingslast-token pooling&#xff08;即直接选最后一个token作为句子的embedding&#xff09;和直接mean pooling都不如文章提出的echo embedding&#xff0c;做法是把句子重复两次&#xff0…