当前位置: 首页 > 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: ''}] //参建单位列表},

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

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

相关文章:

  • 一,初始 MyBatis-Plus
  • 安卓13删除下拉栏中的关机按钮版本2 android13删除下拉栏关机按钮
  • 快递物流单号识别API接口代码
  • AI时代的程序员:如何保持和提升核心竞争力
  • Oracle 数据库常用命令与操作指南
  • spring boot项目对接人大金仓
  • 《操作系统 - 清华大学》1 -2:操作系统概述 —— 什么是操作系统
  • power bi制作各季度收入累加柱状图——日期表、calculate、datesytd
  • OceanBase 3.X 高可用 (一)
  • CSR、SSR、SSG
  • linux -L16-linux 查看应用占用的资源top
  • QT——多线程操作
  • 理解C语言之深入理解指针(三)
  • 「芯片知识」MP3解码ic方案,音乐芯片在数字音频中的作用
  • MyBatis与 Springboot 的集成
  • 迁移学习和外推关系
  • 小程序-生命周期与WXS脚本
  • 828华为云征文 | 云服务器Flexus X实例,Docker集成搭建FC-web模拟器
  • _RET_IP_ 和_THIS_IP_ 作用
  • Spring Boot 点餐系统:高效餐饮服务
  • RtspServer:轻量级RTSP服务器和推流器
  • 为什么结构化 Prompt 如此有效?
  • 无人机飞手培训校企合作特训技术详解
  • 从零开始的软件开发详解:数字药店系统源码与医保购药APP
  • 【记录】在返回值类型为BigDecimal情况下末尾小数位为0的会省略不显示
  • 通信工程高级职称评审条件详细解读
  • yolov8环境安装
  • C语言中易混淆概念的关键字
  • 网络资源模板--Android Studio 零食工坊(商城)
  • 百度高德坐标系相互转换