当前位置: 首页 > web >正文

表单校验--数组各项独立校验

写需求时遇到一个这样的问题,就是校样项是多个的,但是其字段名称相同

这时我们可以这样校验,注意字段之间的关联性

 <div v-for="(item,index) in formData.hospitalDoctorList" :key="item.key || index"><el-form-item label="科室":prop="'hospitalDoctorList.' + index + '.hospitalDeptRelationId'":rules="[{ required: true, message: '请选择医生在此医院的科室', trigger:['change','blur'] }]"><el-cascaderv-model="item.hospitalDeptRelationId":disabled="!item.hospitalPref"@change="deptChange(item, index)":options="item.deptList":props="deptStrictlyProps"collapse-tagsclearable/></el-form-item>

 

在 el-form-item 组件中,:prop 属性用于指定该表单项对应的校验字段路径。

这里的写法是字符串拼接,最终会生成类似 hospitalDoctorList.0.hospitalDeptRelationId、hospitalDoctorList.1.hospitalDeptRelationId 这样的路径。

  • hospitalDoctorList 是一个数组,里面存放着多个医生(或药师)的信息对象。
  • index 是当前循环的索引(比如 0、1、2...),通常在 v-for 循环中传入。
  • hospitalDeptRelationId 是每个医生(药师)对象中的一个字段,表示“药师id”。

所以,:prop="'hospitalDoctorList.' + index + '.hospitalDeptRelationId'"

就是告诉表单校验系统:当前这个表单项对应的数据字段是 hospitalDoctorList 数组中第 index 个对象的 hospitalDeptRelationId 字段。

这样做的好处是,表单校验(比如 required 校验)可以精确地作用到每个医生(药师)对象的 hospitalDeptRelationId 字段上,实现动态表单校验。

可以实现这样的效果:

 

http://www.xdnf.cn/news/16055.html

相关文章:

  • mac安装node的步骤
  • uni-app开发小程序,根据图片提取主题色值
  • 查看两个tv and 手机模拟器的ip
  • 修复echarts由4.x升级5.x出现地图报错echarts/map/js/china.js未找到
  • 每日数据推荐:一线城市基于手机信令的职住数据
  • 对称加密技术详解:原理、算法与实际应用
  • 6.String、StringBuffer、StringBuilder区别及使用场景
  • AI Red Teaming 分析
  • GraphRAG快速入门和原理理解
  • 一维DP深度解析
  • Qt5线程相关事项
  • C# 转换(is和as运算符)
  • vue-pinia
  • WebkitSpeechRecognition 语音识别
  • QT6 源,七章对话框与多窗体(5) 文件对话框 QFileDialog 篇二:源码带注释
  • nginx + uwsgi + systemd 部署 flask
  • 在Windows Server 2012 R2中安装与配置IIS服务并部署mssql靶机教程
  • springboot实战篇1
  • 基于 HAProxy 搭建 EMQ X 集群
  • C++的“链”珠妙笔:list的编程艺术
  • 解决vscode中vue格式化后缩进太小的问题,并去除分号 - 设置Vetur tabSize从2到4,设置prettier取消分号semi
  • 计算机发展史:人工智能时代的智能变革与无限可能
  • 基于WebSocket的安卓眼镜视频流GPU硬解码与OpenCV目标追踪系统实现
  • 【PTA数据结构 | C语言版】哥尼斯堡的“七桥问题”
  • C# Lambdab表达式 Var 类
  • Elupload实现多个文件上传与已上传列表中做对比,若重复则只保留已上传列表中的数据,同时告诉用户,有哪些文件重复上传了
  • 搭建种草商城框架指南
  • 飞算科技:以原创技术为翼,赋能产业数字化转型
  • Linux第三课:需要自己安装的远程登录工具PuTTY的介绍
  • 【PTA数据结构 | C语言版】求单源最短路的Dijkstra算法