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

el-form动态标题和输入值,并且最后一个输入框不校验

需求:给了固定的label,叫xx单位,要输入单位的信息,但是属性名称都一样的,UI画图也是表单的形式,所以改为动态添加的形式,实现方式也很简单,循环就完事了,连着表单校验也动态

1.效果如下 

2.代码实现+讲解

因为需求是最后一个单位没有必要必填,所以在rules这里判断了一下,主要就是循环遍历了el-form-item,之后prop为了区分也是用index来区分了

 <el-dialog title="新建单位" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="unitDialog" width="30%"><el-form:model="formInline"ref="unitRuleForm"label-width="130px"class="demo-form-inline"label-position="left"><el-form-itemv-for="(item, index) in formInline.formData":key="index":label="item.organizations_type":prop="'formData[' + index + '].organizations_name'":rules="index < formInline.formData.length - 1? {required: true,message: `${item.organizations_type}不能为空`,trigger: 'blur'}: null"><el-input v-model="item.organizations_name"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="unitDialog = false">取 消</el-button><el-button type="primary" @click="saveUnitData()">确 定</el-button></span></el-dialog>
formInline: {formData: [{project_id: 0,organizations_type: 'xx单位1',organizations_name: ''},{project_id: 0,organizations_type: 'xx单位2',organizations_name: ''},{project_id: 0,organizations_type: 'xx单位3',organizations_name: ''},{project_id: 0,organizations_type: 'xx单位4',organizations_name: ''},{project_id: 0,organizations_type: 'xx单位5',organizations_name: ''},{project_id: 0,organizations_type: 'xx单位6',organizations_name: ''}] //参建单位列表},

 文章到此结束,希望对你有所帮助~

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 【888题竞赛篇】第十二题,2024ICPC网络赛第二场-游戏(Game)
  • 《C++设计新思维-泛型编程与设计模式之应用》阅读记录
  • kubernetes基础命令
  • ClickHouse 与 Quickwit 集成实现高效查询
  • 網路本地連接沒有有效的IP配置:原因與解決方法
  • 探索AI编程新境界:aider库揭秘
  • 素数判断-C语言
  • 视频监控相关笔记
  • js中Fucntion的意义
  • SpringCloud Alibaba五大组件之——Sentinel
  • vue3-vben-admin开发记录、知识点
  • 游戏淡入淡出效果
  • (笔记自用)LeetCode:快乐数
  • 【Elasticsearch】-图片向量化存储
  • 网络原理之IP协议(网络层)
  • Angular Elements 及其运作原理
  • crontab执行失败的多种原因
  • Go 语言编译器的 //go: 详解
  • hadoop入门学习教程--DKHadoop完整安装步骤
  • java中的hashCode
  • JSONP原理
  • js面向对象
  • mysql innodb 索引使用指南
  • Python中eval与exec的使用及区别
  • Sublime text 3 3103 注册码
  • webpack入门学习手记(二)
  • 关于springcloud Gateway中的限流
  • 将 Measurements 和 Units 应用到物理学
  • 解析 Webpack中import、require、按需加载的执行过程
  • 开放才能进步!Angular和Wijmo一起走过的日子
  • 开源地图数据可视化库——mapnik
  • 如何在GitHub上创建个人博客
  • 少走弯路,给Java 1~5 年程序员的建议
  • 深度学习入门:10门免费线上课程推荐
  • 为视图添加丝滑的水波纹
  • 小而合理的前端理论:rscss和rsjs
  • zabbix3.2监控linux磁盘IO
  • 如何在 Intellij IDEA 更高效地将应用部署到容器服务 Kubernetes ...
  • ### Cause: com.mysql.jdbc.exceptions.jdbc4.MySQLTr
  • #ifdef 的技巧用法
  • #NOIP 2014# day.2 T2 寻找道路
  • #NOIP 2014#day.2 T1 无限网络发射器选址
  • (2)leetcode 234.回文链表 141.环形链表
  • (2024,LoRA,全量微调,低秩,强正则化,缓解遗忘,多样性)LoRA 学习更少,遗忘更少
  • (solr系列:一)使用tomcat部署solr服务
  • (zhuan) 一些RL的文献(及笔记)
  • (差分)胡桃爱原石
  • (附源码)springboot学生选课系统 毕业设计 612555
  • (附源码)springboot优课在线教学系统 毕业设计 081251
  • (附源码)SSM环卫人员管理平台 计算机毕设36412
  • (简单) HDU 2612 Find a way,BFS。
  • (十六)视图变换 正交投影 透视投影
  • (转)自己动手搭建Nginx+memcache+xdebug+php运行环境绿色版 For windows版
  • (转)总结使用Unity 3D优化游戏运行性能的经验
  • ***监测系统的构建(chkrootkit )