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

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

  1. Element Plus的RadioButton
  2. 自定义组件

1. RadioButton

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

2. 自定义组件

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

typescript 复制代码
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方法,代码如下:

typescript 复制代码
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),如果真的不能实现了我才会自定义表单元素组件

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

相关推荐
daols8841 分钟前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
小小小小宇1 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊1 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习2 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖2 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖3 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水3 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐3 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06273 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台3 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue