自定义表单元素组件内容变化触发ElForm重新校验

对于下图中“付费类型”怎么实现有很多种方式,我能想到的是以下两种:

  1. Element Plus的RadioButton
  2. 自定义组件
    在这里插入图片描述

1. RadioButton

它本质上就是一个单选组件,它跟Element Plus的RadioButton本质上没有区别,无非是外观上的差别。那么我们就可以复用RadioButton的逻辑功能,而通过修改样式的方式达到上图的视觉效果。其实,我一般都选则第二种方式,自定义组件,原因是直到今天我才想到可以用RadioButton来实现:(
在这里插入图片描述

2. 自定义组件

写一个FeeTypeSelector的组件,它的属性大概是这样的

interface FeeTypeSelectorProps {modelValue: string;data: FeeTypeSelectorItem[]; // 可选项的数据
}interface FeeTypeSelectorItem {value: string;text: string;....
}...

通过接收参数modelValue和触发update:modelValue让FeeTypeSelector组件支持v-model。至此这个组件就大致上写好了。把它放入带有规则的FormItem中,也能正常的校验。不过我今天发现,Element Plus的表单输入组件在有校验错误后再次输入正确的值后校验错误会自动消失,而不需要点击提交按钮调用form.validate方法,而上面的自定义组件就不能。其实以前也知道有这个问题,当时就没当回事,今天下定决心要去解决这个问题,就去翻看了Element Plus的源码,直接说结果吧,过程也没人爱看。
自定义组件内部watch一下modelValue,变化的话调用FormItem的validate方法,代码如下:

import { useFormItem } from 'element-plus'
const { formItem } = useFormItem()
watch(() => props.modelValue, () => {if (props.validateEvent) {formItem?.validate?.('change').catch((err) => console.warn(err))}
})

本来是想介绍一下在重新输入后怎么消除自定义组件的报错信息的,经过这一番思考,我的想法有了变化,优先借助Element Plus现有的表单元素组件(即方法1),如果真的不能实现了我才会自定义表单元素组件

如果对你有帮助,帮忙点赞哈,嘻嘻:)

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

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

相关文章

String::intern()介绍

[Q&A] String::intern() 的作用 String::intern()是一个本地方法,它的作用是如果字符串常量池中已经包含一个等于此String对象的字符串,则返回代表池中这个字符串的String对象的引用;否则,会将此String对象包含的字符串添加到…

Vue阶段练习:组件拆分

页面开发思路 分析页面&#xff0c;按模块拆分组件&#xff0c;搭架子&#xff08;局部或全局注册&#xff09;根据设计图&#xff0c;编写html结构css样式拆分封装通用小组件&#xff08;局部或全局注册&#xff09;将来通过js动态渲染实现功能 BaseBrandItem.vue <templ…

数字旅游以科技创新为动力:推动旅游服务的智能化、网络化和个性化发展,满足游客日益增长的多元化、个性化需求

目录 一、引言 二、科技创新推动旅游服务智能化发展 1、智能化技术的引入与应用 2、智能化提升旅游服务效率与质量 三、科技创新推动旅游服务网络化发展 1、网络化平台的构建与运营 2、网络化拓宽旅游服务渠道与范围 四、科技创新推动旅游服务个性化发展 1、个性化需求…

C语言中细说用typedef和用struct定义结构体的区别及其在单片机C语言开发中的应用

目录 1.struct声明结构体 2.定义结构体变量 3. typedef &#xff08;1&#xff09;采用struct和 typedef struct 声明结构体是有区别的 &#xff08;2&#xff09;对比&#xff0c;使用typedef struct 声明结构体 4.GPIO_TypeDef是结构体名称&#xff0c;而不是结构体变量…

Flutter笔记:谈Material状态属性-为什么FlatButton等旧版按钮就废弃了

Flutter笔记 谈Material状态属性-为什么FlatButton等旧版按钮就废弃了 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite&#xff1a;http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this artic…

C#知识|Dictionary泛型集合的使用总结

哈喽,你好,我是雷工! 以下是C#Dictionary泛型集合的学习笔记。 01 Dictionary泛型集合 1.1、Dictionary<K,V>通常称为字典, 1.2、其中<K,V>是自定义的,用来约束集合中元素类型。 1.3、在编译时检查类型约束, 1.4、无需装箱拆箱操作, 1.5、操作与哈希表(Ha…

网络工程师必学知识:TCP抓包分析Seq、SYN、ACK的变化过程

网络工程师必学知识:TCP抓包分析Seq、SYN、ACK的变化过程 1.概述:2.抓包3.分析:重点1:重点2:4.总结:1.概述: 下面是我面试时遇到的问题。 问:TCP协议位于tcp/ip协议栈的哪一层呢? 答:这个问题要是答不上来,就不用看下面的内容了。 问:TCP抓包时Seq、SYN、ACK的变化…

Microsoft Threat Modeling Tool 使用(二)

主界面 翻译 详细描述 选择了 “SDL TM Knowledge Base (Core)” 模板并打开了一个新的威胁模型。这个界面主要用于绘制数据流图&#xff08;Data Flow Diagram, DFD&#xff09;&#xff0c;它帮助您可视化系统的组成部分和它们之间的交互。以下是界面中各个部分的功能介绍&a…

2023-2024年Web3行业报告合集(精选13份)

Web3行业报告&#xff08;精选13份&#xff09; 2023-2024年 来源&#xff1a;2023-2024年Web3行业报告合集&#xff08;精选13份&#xff09; 【以下是资料目录】 2023Web3产业发展现状分析及国内外落地实践报告 2023模块化区块链承载Web3.0应用的新模式 2023年AI应用需求…

[基础] Unity Shader:顶点着色器(vert)函数

顶点着色器&#xff08;Vertex Shader&#xff09;是图形渲染的第一个阶段&#xff0c;它的输入来自于CPU。顶点着色器的处理单位是顶点&#xff0c;CPU输入进来的每个顶点都会调用一次顶点着色器函数&#xff0c;也就是我们在Shader代码里所定义的vert函数。本篇我们将会通过顶…

Linux下JVM相关指令详解及案例介绍

目录 博客&#xff1a;Linux下JVM相关指令详解及案例介绍1. jps2. jstack3. jmap4. jstat5. jinfo6. jconsole7. jcmd 博客&#xff1a;Linux下JVM相关指令详解及案例介绍 在Linux环境下&#xff0c;对于Java应用程序的管理和监控&#xff0c;有一系列强大的命令和工具可供使用…

WPF之可翻转面板

1&#xff0c;创建翻转面板的资源字典&#xff1a;FlippPanel.xaml。 无外观控件同样必须给样式指定类型&#xff08; <ControlTemplate TargetType"ss:FlipPanel">&#xff09;&#xff0c;相关详情参考&#xff1a;WPF之创建无外观控件-CSDN博客&#xff09…

场景文本检测识别学习 day06(Vi-Transformer论文精读、MAE论文阅读)

Vi-Transformer论文精读 在NLP领域&#xff0c;基于注意力的Transformer模型使用的非常广泛&#xff0c;但是在计算机视觉领域&#xff0c;注意力更多是和CNN一起使用&#xff0c;或者是单纯将CNN的卷积替换成注意力&#xff0c;但是整体的CNN 架构没有发生改变VIT说明&#x…

React 之 使用 ref 引用值

当你希望组件“记住”某些信息&#xff0c;但又不想让这些信息 触发新的渲染 时&#xff0c;你可以使用 ref 。 //通过从 React 导入 useRef Hook 来为你的组件添加一个 ref import { useRef } from react;export default function Counter() {//在组件内&#xff0c;调用 useR…

React中的高阶组件

高阶组件 HOC 是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分&#xff0c;它是一种基于 React 组合特性而形成的设计模式 参数为组件&#xff0c;返回值为新函数 const EnhanceComponent higherOrderComponent(WrappedComponent);组件将 pro…

蓝桥杯单片机省赛——第八届“基于单片机的电子钟程序设计与调试”程序部分

往期回顾 第三届蓝桥杯单片机省赛 第四届蓝桥杯单片机省赛 第五届蓝桥杯单片机省赛 第六届蓝桥杯单片机省赛 第七届蓝桥杯单片机省赛 文章目录 往期回顾一、前期准备二、代码详情1.基础代码蜂鸣器/继电器/led/定时器之类的代码 2.按键详解按键写法讲解 3.驱动的处理驱动写法讲…

程序员缓解工作压力——方法分享

前言 作为一名初级程序员&#xff0c;我承认自己在应对工作压力方面还有待提高。在日常工作中&#xff0c;我时常感到压力山大&#xff0c;尤其是在面对复杂问题或紧迫的项目期限时。然而&#xff0c;为了保持高效和持久的工作热情&#xff0c;我还是积极寻求并使用了一…

INNODB和MyISAM有什么区别

InnoDB和MyISAM是MySQL数据库中两种常见的存储引擎&#xff0c;它们之间存在一些重要的区别。 事务支持&#xff1a;InnoDB支持ACID&#xff08;原子性、一致性、隔离性和持久性&#xff09;事务&#xff0c;这保证了数据的完整性和一致性。相比之下&#xff0c;MyISAM不支持事…

学习java第五十九天

DI&#xff1a;依赖注入 依赖注入是spring容器中创建对象时给其设置依赖对象的方式&#xff0c;比如给spring一个清单&#xff0c;清单中列出了需要创建B对象以及其他的一些对象&#xff08;可能包含了B类型中需要依赖对象&#xff09;&#xff0c;此时spring在创建B对象的时候…

Scala应用 —— JDBC的创建

文章目录 Scala应用 —— JDBC的创建前言一、JDBC的创建过程1.初始化连接1.1 配置驱动1.2 创建连接对象 2. 初始化执行器2.1 创建执行器对象2.2 初始化执行器参数 3. 执行操作并返回结果 二、Scala JDBC的基本设计思路1. 操作步骤设计2. 解决结果差异化3.实现jdbc方法并输出结果…