自定义表单元素组件内容变化触发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),如果真的不能实现了我才会自定义表单元素组件

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

相关推荐
前端小巷子23 分钟前
Web开发中的文件上传
前端·javascript·面试
翻滚吧键盘1 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹1 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
杨进军2 小时前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW2 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字2 小时前
Kotlin lazy 委托的底层实现原理
前端
Q_970956392 小时前
java+vue+SpringBoo校园失物招领网站(程序+数据库+报告+部署教程+答辩指导)
java·数据库·vue.js
爱分享的程序员3 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘3 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出3 小时前
万字长文带你了解微前端架构
前端·微服务·前端框架