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

news2024/9/20 16:30:49

不管是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']混搭,这样不明真相的童鞋看到了,自然不得不拍手称“这都行?!”,但最好不要* *

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

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

相关文章

聚观早报 | 苹果市值跌破2万亿美元大关;卢伟冰晋升小米集团总裁

今日要闻&#xff1a;苹果市值跌破2万亿美元大关&#xff1b;卢伟冰晋升小米集团总裁&#xff1b;京东方拿下iPhone 15订单&#xff1b;英伟达与富士康达成合作&#xff1b;哪吒汽车旗下车型价格调整苹果市值跌破2万亿美元大关 1 月 4 日消息&#xff0c;据国外媒体报道&#x…

C51单片机连接wifi模块,发送AT指令

一、AT指令AT 指令集是从终端设备&#xff08; Terminal Equipment &#xff0c; TE) 或 数据终端设备 &#xff08; Data TerminalEquipment &#xff0c; DTE) 向终端适配器 (Terminal Adapter &#xff0c; TA) 或 数据电路终端设备 (Data CircuitTerminal Equipment &#…

CDGA|企业数字化转型进展得越快就越好吗?

数据治理并不是一件简单的事情。即使是行业知名公司&#xff0c;在高度重视和确保投入的情况下&#xff0c;完成全公司“数据底座”/“数据中台”的所耗时间也往往以年计。并且&#xff0c;还需要注意到&#xff0c;数据规范只是数字化转型的一个维度而已&#xff1a; 在国标《…

SQL INSERT INTO 语句

INSERT INTO 语句用于向表中插入新记录。 SQL INSERT INTO 语句 INSERT INTO 语句用于向表中插入新记录。 SQL INSERT INTO 语法 INSERT INTO 语句可以有两种编写形式。 第一种形式无需指定要插入数据的列名&#xff0c;只需提供被插入的值即可&#xff1a; INSERT INTO t…

Python爬虫常用哪些库?

经常游弋在互联网爬虫行业的程序员来说&#xff0c;如何快速的实现程序自动化&#xff0c;高效化都是自身技术的一种沉淀的结果&#xff0c;那么使用Python爬虫都会需要那些数据库支持&#xff1f;下文就是有关于我经常使用的库的一些见解。 请求库&#xff1a; 1、urllib&a…

matlab复杂函数多元函数拟合

简介 本文介绍了基于matlab实现的复杂函数以及多元函数的拟合。在工程和研究中偶尔会遇到要用一个非常复杂的数学公式来拟合实验测量数据&#xff0c;对这些复杂的数学公式拟合时&#xff0c;采用常见的拟合方法往往会失败&#xff0c;或者得不到足够精确的结果。本文以笔者多…

AVL树:高度平衡的二叉搜索树

AVL树 AVL树和BST树的联系   答&#xff1a;BST树&#xff08;二叉排序树&#xff09;当节点的数据key有序时是一棵单支树&#xff0c;查找时效率直接降低到O(N)而不是树高&#xff0c;为了使树尽量两边均匀&#xff0c;设计出了AVL树&#xff0c;AVL树的左右高度差不超过1。…

sql语句练习题1

1、选择部门30中的所有员工&#xff1b; 要注意到查的是所有员工 代码如下&#xff1a; mysql> select * from emp where deptno 30;2、列出所有办事员(CLERK)的姓名&#xff0c;编号和部门编号&#xff1b; 注意的是要查的是姓名&#xff0c;编号和部门编号 范围限定的是…

并发编程的原子性 != 事务ACID的原子性

△Hollis, 一个对Coding有着独特追求的人△这是Hollis的第 412 篇原创分享作者 l Hollis来源 l Hollis&#xff08;ID&#xff1a;hollischuang&#xff09;关于原子性&#xff0c;很多人在多个地方都听说过&#xff0c;大家也都背的很熟悉。在事务的ACID中&#xff0c;有原子性…

儒家思想和道家思想的三个主要差异

孔子、孟子、老子、庄子&#xff0c;这四位古代思想家被称为“中国四哲”&#xff0c;他们分别代表了儒家和道家思想。这两大思想流派&#xff0c;是数千年来中国人智慧的结晶和文化的瑰宝。01先秦儒家思想的发展&#xff0c;经过了三个阶段&#xff0c;第一阶段是孔子&#xf…

CHAPTER 7 Ansible playbook(四)

ansible-playbook7.1 roles&#xff08;角色&#xff09;7.1.1 Ansible Roles 介绍7.1.2 Roles结构7.1.3 存储和查找角色7.1.4 制作一个Role7.1.5 使用角色7.1.5.1 经典方法7.1.5.2 import_role7.1.6 如何使用Galaxy7.1 roles&#xff08;角色&#xff09; 7.1.1 Ansible Role…

windows docker安装prometheus和grafana

文章目录docker安装prometheusdocker安装grafanawindows安装windows_exporterprometheus配置新增windows_exporter的job,配置grafana导入windows模板即可出现酷炫大屏出现酷炫画面完成docker安装prometheus 拉取镜像,在D盘下创建prometheus.yml配置文件,映射到docker里面d:/se…

【pandas】教程:8-如何组合多个表格的数据

Pandas 组合多个表格的数据 本节使用的数据为 data/air_quality_no2_long.csv&#xff0c;链接为 pandas案例和教程所使用的数据-机器学习文档类资源-CSDN文库 导入数据 NO2NO_2NO2​ import pandas as pd air_quality_no2 pd.read_csv("data/air_quality_no2_long.cs…

二、python编程进阶02:模块和包

目录 1. python中的模块是什么 2. 导入模块: 学习import语句 2.1 import语句介绍 2.2 import导入模块的语法 2.3 导入自己的模块 2.4 导入数字开头或者带空格的模块 3. 编写自定义模块 3.1 给自定义模块编写测试代码 3.2 给自定义模块模块编写说明文档 4. 模块的搜索…

1215. 小朋友排队(树状数组应用 -- 逆序对个数)

题目如下&#xff1a; 思路 or 题解 我们可以得出交换的次数 > 逆序对个数 kkk 我们可以发现 所有 位置 左边大于它的个数 右边小于它的个数和 kik_iki​ 等于 k∗2k*2k∗2 我们可以简单证明出(感觉出)&#xff1a;答案就是 ∑1n(1ki)∗ki2\sum^n_1 \frac{(1 k_i) * k_i}…

JavaScript 错误

文章目录JavaScript 错误 - throw、try 和 catchJavaScript 错误JavaScript 抛出&#xff08;throw&#xff09;错误JavaScript try 和 catchThrow 语句实例实例JavaScript 错误 - throw、try 和 catch try 语句测试代码块的错误。 catch 语句处理错误。 throw 语句创建自定义错…

string的使用介绍

目录 标准库中的string类 string类(了解) 编码介绍 string类的常用接口说明 Member functions 测试一&#xff1a;创建对象 测试二&#xff1a;遍历字符串 Iterators 测试三&#xff1a;反向迭代器(Iterators) Capacity 测试四&#xff1a;容器相关(Capacity) 测试…

Redis企业云如何通过缓存轻松扩展到亿级请求?

你是否在春运抢票过程中遇到12306 APP瘫痪&#xff1f; 你是否在双十一抢好物的时候显示系统繁忙&#xff1f; 你是否在微博刷某个爆了的娱乐新闻时显示页面走丢了&#xff1f; 前几天热搜上好像又说小红书又崩溃了&#xff1f; 当用户请求量过高&#xff0c;数据库无法支撑时&…

Annotation(注解)

一、注解概述1.从 JDK 5.0 开始,Java 增加了对元数据(MetaData) 的支持,也就是Annotation(注解)2.Annotation 其实就是代码里的特殊标记,这些标记可以在编译,类加载,运行时被读取,并执行相应的处理。通过使用 Annotation,程序员可以在不改变原有逻辑的情况下,在源文件中嵌入一些…

Go第 6 章:函数、包和错误处理

Go第 6 章&#xff1a;函数、包和错误处理 6.1 为什么需要函数 6.1.1请大家完成这样一个需求: 输入两个数,再输入一个运算符(,-,*,/)&#xff0c;得到结果.。 6.1.2使用传统的方法解决 分析一下上面代码问题 上面的写法是可以完成功能, 但是代码冗余同时不利于代码维护函数…