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

el-form v-for循环列表的表单如何校验

1、普通的表单校验直接在最外层<el-form> :model="数据" :rules="规则" ,再在<el-form-item>层设置prop值与model里数据定义的key保持一致即可。

<el-form-item label="名称" prop="ruleName" :rules="[{required: true,message:'请输入名称',trigger: 'blur'}]"><el-input v-model="formData.ruleName" style="width:160px"></el-input>
</el-form-item>

2、很多时候表单不是写死的,而是动态生成的(v-for循环)。

注意:

1、循环体绑定的 list 必须是 form 里面的对象。

2、prop 绑定动态的属性, rules 对动态属性校验。

3、prop 绑定的属性名和 rules 绑定的校验名必须保持一致。

(1)一层循环嵌套

<el-row v-for="(item, i) in formData.overriders" :key="i"><el-form-item label="覆盖类型" :prop="`overriders.${i}.operType`" :rules="[{required: true,message:'请选择覆盖类型',trigger: 'change'}]"><el-select v-model="item.operType" placeholder="覆盖类型" style="width:120px"><el-option v-for="(item, index) in overrideDict" :key="index" :label="item.key" :value="item.value" v-show="!item.selected"></el-option></el-select></el-form-item><el-form-item label="操作类型" :prop="`overriders.${i}.operParam[0].operator`" :rules="[{required: true,message:'请选择操作类型',trigger: 'change'}]"><el-select v-model="item.operParam[0].operator" placeholder="操作类型" style="width:120px"><el-option v-for="(value, key, index) in operateDict" :key="index" :label="value" :value="key"></el-option></el-select></el-form-item>
</el-row>

一层嵌套时:

prop 属性动态绑定,为model对象下的数据,如formData.overriders为循环数组:

则::model="formData",:prop="overriders.${i}.operType"

(2)双层循环嵌套

<el-row v-for="(policyItem, policyIndex) in formData.overridePolicy" :key="policyIndex"><el-row v-for="(overridersItem, overridersIndex) in policyItem.overriders" :key="overridersIndex"><el-form-item label="覆盖类型" :prop="'overridePolicy.' + policyIndex + '.overriders.' + overridersIndex + '.operType'" :rules="[{required: true,message:'请选择覆盖类型',trigger: 'change'}]"><el-select v-model="overridersItem.operType" placeholder="覆盖类型"><el-option v-for="(item, index) in policyItem.overrideDict" :key="index" :label="item.key" :value="item.value" v-show="!item.selected"></el-option></el-select></el-form-item><el-form-item label="操作类型" :prop="'overridePolicy.' + policyIndex + '.overriders.' + overridersIndex + '.operParam[0].operator'" :rules="[{required: true,message:'请选择操作类型',trigger: 'change'}]"><el-select v-model="overridersItem.operParam[0].operator" placeholder="操作类型"><el-option v-for="(value, key, index) in operateDict" :key="index" :label="value" :value="key"></el-option></el-select></el-form-item></el-row>
</el-row>

双层嵌套时:

prop 属性动态绑定 :prop="'overridePolicy.' + policyIndex + '.overriders.' + overridersIndex + '.operType'" 

http://www.lryc.cn/news/319104.html

相关文章:

  • 笔记:《NCT全国青少年编程能力等级测试教程Python语言编程三级》
  • 地平线旭日x3派部署yolov5--全流程
  • 【Golang星辰图】Go语言云计算SDK全攻略:深入Go云存储SDK实践
  • 深入理解TCP:序列号、确认号和自动ACK的艺术
  • 家电工厂5G智能制造数字孪生可视化平台,推进家电工业数字化转型
  • ctf_show笔记篇(web入门---代码审计)
  • c语言的字符串函数详解
  • HarmonyOS NEXT应用开发—折叠屏音乐播放器方案
  • Java项目:55 springboot基于SpringBoot的在线视频教育平台的设计与实现015
  • 说下你对TCP以及TCP三次握手四次挥手的理解?
  • wsl-oracle 安装 omlutils
  • Python类属性和对象属性大揭秘!
  • 北斗卫星在桥隧坡安全监测领域的应用及前景展望
  • 如何通过堡垒机JumpServer使用VisualCode 连接服务器进行开发
  • 【Linux】进程优先级
  • Fair Data Exchange:区块链实现的原子式公平数据交换
  • 详解优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器
  • Vue3+TS+Vite 找不到模块“@/components/xxx/xxx”或其相应的类型声明
  • Vue3-响应式基础:单文件和组合式文件
  • DVWA-File Upload文件上传
  • python之word操作
  • Linux下新增有root权限的用户
  • RPC通信原理(一)
  • 修改/etc/resolve.conf重启NetworkManager之后自动还原
  • Web前端依赖版本管理最佳实践
  • 多线程进阶
  • 总结linux常用命令
  • C++ 枚举
  • Vue2在一个页面内动态切换菜单显示对应的路由组件
  • 执行任务赚积分C卷(JavaPythonC++Node.jsC语言)