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

vue+element多层表单校验prop和rules

核心点:外层循环是item和index,内层循环是item2和index2

如果都是定义的同一个属性名
外层循环得写:prop="'block.'+index+'.numerical'"
同理内层循环就得写:prop="'objectSpecs.'+ index2 + '.numerical'"

校验函数方法 :rules="getRules(item2, item2.name)"

<div class="block" v-for="(item, index) in block" :key="index"><el-form ref="blockForm" :model="item" :rules="formBlockRule" :inline="true"><el-form-item>多个formItem...省略一下</el-form-item><div v-for="(item2,index2) in item.objectSpecs" :key="index2"><!--输入框--><el-form-item v-if="item2.input" :prop="'objectSpecs.' + index2 + '.numerical'" :label="item2.name" label-width="130px" :rules="getRules(item2, item2.name)"><el-input :placeholder="item2.placeholder" v-model="item2.numerical" :onkeyup="numberFormate(item2, 'numerical')" :disabled="readOnly"></el-input></el-form-item><el-form-item v-if="item2.input"><span>{{item2.units}}</span></el-form-item><!--选择框--><el-form-item v-if="!item2.input" :prop="'objectSpecs.' + index2 + '.numerical'" :label="item2.name" label-width="130px" :rules="getRules(item2, item2.name)"><el-select v-model="item2.numerical" placeholder="请选择" :disabled="readOnly"><el-option v-for="(key,value) in item2.numericalList" :key="value" :label="key" :value="value"></el-option></el-select></el-form-item></div></el-form>
</div>
getRules(item, name) {if(item.input){return [{ required: true, message: '请输入' + name, trigger: 'blur' },]}else{return [{ required: true, message: '请选择' + name, trigger: 'change' }];}
}
http://www.lryc.cn/news/125060.html

相关文章:

  • Dubbo 核心概念和架构
  • 【数据结构OJ题】反转链表
  • Java8 Stream 之groupingBy 分组讲解
  • 优哲SSD大文件写性能测试
  • Python基础教程: json序列化详细用法介绍
  • 一张图看懂 USDT三种类型地址 Omni、ERC20、TRC20的区别
  • SegFormer之模型训练
  • Azure资源命名和标记决策指南
  • 【在一个升序数组中插入一个数仍升序输出】
  • 图像去雨、去雪、去雾论文学习记录
  • YARN框架和其工作原理流程介绍
  • 多维时序 | MATLAB实现ZOA-CNN-BiGRU-Attention多变量时间序列预测
  • centos上下载redis
  • 黑马项目一阶段面试58题 Web14题(二)
  • 软考高项-思维导图34-36(计算机高级系统项目管理师)
  • C++的stack和queue+优先队列
  • Ubuntu 18.04.6 Android Studio Giraffe adb logcat 无法使用
  • Python采集天气数据,做可视化分析【附源码】
  • 优维低代码实践:自定义模板
  • 电商3D产品渲染简明教程
  • 探索未来:元宇宙与Web3的无限可能
  • GraphQL(六)登录态校验Directive
  • 强大的AI语言模型
  • 成集云 | 鼎捷ERP采购单同步钉钉 | 解决方案
  • 【Kubernetes】Kubernetes的PV和PVC的用法
  • 【Redis】Redis三种集群模式-主从、哨兵、集群各自架构的优点和缺点对比
  • Python爬虫:如何使用Python爬取网站数据
  • 剑指offer专题2:队列和栈
  • pytorch入门-神经网络
  • kafka使用心得(二)