element-plus的form表单form-item的prop怎么写才能正确校验,实现逻辑是怎么样的?

不管是element-plus还是上一个版本的element-ui,都是一个使用很广泛的基于css+html+js的ui组件库,它的form表单自带强大的校验功能,form-item的prop怎么写才正确,实现逻辑是怎么样的?element-plus的form表单的model、form-item做校验用的prop、lodash的get 都有什么关系??如果弄懂了这些关系,那么下次可能就不再需要查阅了。

下面开始进入具体场景:

在最简单的form表单里面,只要这么写就能使form表单自带的validate方法生效,调用api实现各种需求,像下面这样:
在这里插入图片描述

但是,往往需求有时候更复杂一点,比如,动态渲染的表单,使用一系列的v-for遍历出来的表单,
在这里插入图片描述

我先描述一下上面这个k8s的affinity ui组件。
首先,这是一个数组对象,里面有属性:条件、权重、选择器,选择器值也是一个数组,包含了标签名、修饰符、标签值三个属性,点击里面的添加是添加一个选择器元素,点击最下面的添加是添加一个亲和性,也就是在最外层数组添加多一个条件、权重、选择器组成的一个对象,
其中,这些校验条件如下
在这里插入图片描述
先准备好ui框架
在这里插入图片描述
以上是大体的dom框架。为什么这里prop要这么写呢?以 :prop="`${index}.weight`"
接下来看下文档描述
在这里插入图片描述
可以看出,要校验必须把prop写对。但是,为什么呢?关系是怎么样的,看源码是怎么用prop进行表单验证的;
在这里插入图片描述
这里validate方法,就是下面截图,先看到前面一堆if判断,大概可以看出是对一些必要参数的可靠性限制,然后dovalidate,可以推测,这里才是真正做校验的函数
在这里插入图片描述
继续往里面看
在这里插入图片描述
这里的fieldValue应该就是我们的prop对应的value了,继续看fieldValue的逻辑
在这里插入图片描述
是return了一个getProp(model, props.prop).value,看起来好像有点熟悉,继续看getProp里面的逻辑
![](https://img-blog.csdnimg.cn/8179095bba8a4f33b1bcd82c727e8743.png
在这里插入图片描述
简单点,就是lodash的get方法,进去lodash看get是什么样的先
在这里插入图片描述
在这里插入图片描述
解释一下path是一个路径字符串数组,可以结合下面这个lodash文档的例子来理解
在这里插入图片描述
在这里插入图片描述
tokey是将非字符串或symble类型的属性名专成字符串类型的,
while (object != null && index < length) { object = object[toKey(path[index++])]; }
这里从最外层开始取,一直到所达所设定的路径层数,或者当到达对象最深的一级,然后retune出结果,get方法做的事也就到这里结束了。

回到element,以后每次写form-item的prop时,form的model就是get的第一个参数,prop是get的第二个参数。 现在终于知道为什么文档写的prop为什么是字符串或是字符串数组了吧。
基于上面的解释,以后写prop的时候,当然也会想到lodash的get方法入参的例子,使用点属性0.a.b或者方括号属性[0].a.b以及路径字符串数组的方式[0,a,b]或者['0',a,b]都可以实现正确的prop,
并且,也可以为了提高代码不可阅读性,进行像这样['0.a','b'] ['0','a.b'] ['[0]a','b']混搭,这样不明真相的童鞋看到了,自然不得不拍手称“这都行?!”,但最好不要* *

Vue3 Element Plus是一套基于Vue3的UI组件库提供了丰富的组件和功能,其中包括了Form表单组件。在Element Plus中,可以通过动态校验实现同一字段的表单动态校验。 在Vue3 Element Plus中,可以使用`el-form`组件来创建表单,通过`el-form-item`组件来包裹表单项。要实现同一字段的表单动态校验,可以使用`rules`属性来定义校验规则。 首先,需要在Vue组件中定义表单数据和校验规则。例如: ```javascript data() { return { form: { field1: '', field2: '' }, rules: { field1: [ { required: true, message: '字段1不能为空', trigger: 'blur' }, // 其他校验规则 ], field2: [ { required: true, message: '字段2不能为空', trigger: 'blur' }, // 其他校验规则 ] } } } ``` 然后,在模板中使用`el-form`和`el-form-item`组件来创建表单,并绑定数据和校验规则。例如: ```html <template> <el-form :model="form" :rules="rules" ref="form"> <el-form-item label="字段1" prop="field1"> <el-input v-model="form.field1"></el-input> </el-form-item> <el-form-item label="字段2" prop="field2"> <el-input v-model="form.field2"></el-input> </el-form-item> </el-form> </template> ``` 最后,可以通过调用`validate`方法来触发表单校验。例如: ```javascript methods: { submitForm() { this.$refs.form.validate((valid) => { if (valid) { // 校验通过,提交表单 } else { // 校验不通过,处理错误信息 } }); } } ``` 这样,就可以实现同一字段的表单动态校验了。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值