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

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

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

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

 <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.lryc.cn/news/595040.html

相关文章:

  • 计算机发展史:晶体管时代的技术飞跃
  • Web LLM 安全剖析:以间接提示注入为核心的攻击案例与防御体系
  • WinForm-免费,可商用的WinForm UI框架推荐
  • 03-虚幻引擎蓝图类的各父类作用讲解
  • 农村供水智慧化管理系统:从精准监测到智能调度,破解农村用水安全与效率难题
  • Python Locust库详解:从入门到分布式压力测试实战
  • 开发避坑短篇(3):解决@vitejs plugin-vue@5.0.5对Vite^5.0.0的依赖冲突
  • 5G/4G PHY SoC:RNS802,适用于集成和分解的小型蜂窝 RAN 架构。
  • Linux网络信息(含ssh服务和rsync)
  • 模型系列(篇一)-Bert
  • Kotlin 高阶函数初步学习
  • 【MySQL】Linux配置MySQL Windows远程连接
  • 步进电机基础
  • 基于 Nginx 搭建 OpenLab 多场景 Web 网站:从基础配置到 HTTPS 加密全流程
  • ORA-00600: internal error code, arguments: [krse_arc_source_init.1], [4], [2]
  • 汽车售后诊断仪DoIP和CANBus诊断指令分析
  • Milvus:开源向量数据库的初识
  • HTTP性能优化:打造极速Web体验的关键策略
  • Python 进阶(五): Excel 基本操作
  • Android 版本与 API 级别对照速查表
  • Go语言进阶书籍:Go语言高级编程(第2版)
  • Spring Boot05-热部署
  • Python 高效创建多项式及相关计算方法
  • 基于dcmtk的dicom工具 第八章 echoSCU-dicom测试连接
  • Prompt Engineering(提示词工程)基础了解
  • 第三章自定义检视面板_创建自定义编辑器类_编扩展默认组件的显示面板(本章进度6/9)
  • 14.6 《3步实战LLaMA2-7B指令微调:Hugging Face生态+LoRA技术,MT-Bench得分从5.1直升7.3》
  • LeetCode - 3274. Check if Two Chessboard Squares Have the Same Color
  • 数据结构之克鲁斯卡尔算法
  • C#/.NET/.NET Core技术前沿周刊 | 第 47 期(2025年7.14-7.20)