el-form 根据数组动态渲染的el-form-item必填校验绑定

需求:可手动动态添加的输入框,有必填校验

代码:这里模拟电话必填,

注意:1,el-from必须绑定数据:下例(:model=form;

           2,el-form-item必须绑定prop:下例(:prop="data.' + i + '.number' ";因为这里是数组渲染的,需要index辅助确认唯一,注意和input的内容对应上。

           3,必填校验的key要和绑定的数据key值对应,这里因为数据不多且懒得多写,直接写在template里面了:下例(:rules="[{ required: true, message: '电话号码', trigger: 'blur' }]";

           4,以上都不是我一直出错的原因,我出错的原因是:data字段是单独引入的,没有和form数据对应~~注意校验是针对form表单的,所以在input的输入框加了change事件,及时同步form数据。

<el-form :model="form" class="fromClass" ref="formRef">
      <el-row v-for="(item, index) in data" :key="index">
        <el-col :span="8">
          <el-form-item :label="'名字' + (index + 1)">
            <el-input v-model="item['name']"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="住址" class="alignRight">
            <el-input v-model="item['adress']"/>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="电话" class="alignRight labelWidth120" :prop="'data.' + index + '.number'"
            :rules="[{ required: true, message: '电话号码必填', trigger: 'blur' }]">
            <el-input v-model="item['number']" @change="handleChange" />
          </el-form-item>
        </el-col>
        <el-col :span="1">
          <div class="dis-btn"  @click="addDis" >
           <img :src="getImageUrl('add1')" alt="choose" >
         </div>
          <div class="dis-btn"  @click="delDis(i)">
            <img :src="getImageUrl('del1')" alt="choose">
         </div>
        </el-col>
      </el-row>
    </el-form>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/593620.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

刘强东创业成功的四大要素:团队、用户体验、成本与效率

摘要&#xff1a; 本文深入探讨了刘强东创业成功的四大关键要素&#xff1a;团队、用户体验、成本和效率。通过对这些要素的细致分析&#xff0c;我们旨在揭示刘强东如何运用这些策略将京东打造成一个全球知名的电商平台。 一、引言 刘强东作为京东集团的创始人和CEO&#xff…

【DPU系列之】DPU中的ECPF概念是什么?全称是什么?(E CPF对标H CPF;embedded CPU function ownership)

ECPF&#xff1a;embedded CPU function ownership。 嵌入式CPU运转ownership。也叫DPU模式&#xff0c;是DPU工作运转3种模式之一&#xff0c;也是默认的模式。这里的嵌入式CPU指的是DPU上ARM CPU&#xff0c;表示网卡所有资源和功能被embedded CPU全权管理&#xff0c;行使所…

虚拟机jvm下

jvm原理与实践 java程序的跨平台特性 jvm基本结构 JVM类加载流程和内存结构总览 类加载 加载阶段 类加载 验证阶段 类加载 准备阶段 类加载 解析阶段 类加载 初始化阶段 程序计数器 虚拟机栈&本地方法栈 栈帧操作 堆 方法区 永久代 元空间 垃圾回收 可触及性

SpringBoot+Vue实现美食交流网站的设计与实现

一、前言介绍 美食交流网站采用Java技术&#xff0c;Mysql数据库存储数据&#xff0c;基于Springboot框架开发。系统采用了模块化设计方法&#xff0c;根据用户的需求开发功能模块&#xff0c;方便了程序扩展维护&#xff0c;以便后期的更新。整个开发过程首先对系统进行需求分…

Gradle 进阶学习 之 build.gradle 文件

build.gradle 是什么&#xff1f; 想象一下&#xff0c;你有一个大型的乐高项目&#xff0c;你需要一个清单来列出所有的乐高积木和它们如何组合在一起。在软件开发中&#xff0c;build.gradle 就是这个清单&#xff0c;它告诉计算机如何构建&#xff08;组合&#xff09;你的软…

Python-VBA函数之旅-open函数

目录 一、open函数的常见应用场景 二、open函数使用注意事项 三、如何用好open函数&#xff1f; 1、open函数&#xff1a; 1-1、Python&#xff1a; 1-2、VBA&#xff1a; 2、推荐阅读&#xff1a; 个人主页&#xff1a;神奇夜光杯-CSDN博客 一、open函数的常见应用场…

LLaMA详细解读

LLaMA 是目前为止&#xff0c;效果最好的开源 LLM 之一。精读 LLaMA 的论文及代码&#xff0c;可以很好的了解 LLM 的内部原理。本文对 LLaMA 论文进行了介绍&#xff0c;同时附上了关键部分的代码&#xff0c;并对代码做了注释。 摘要 LLaMA是一个系列模型&#xff0c;模型参…

带权并查集

续前章节&#xff1a;并查集及应用 目录 1 带权问题1.1 点带权1.2 边带权 2 例题2.1 家族合并2.2 信息传递2.3 [NOI2002] 银河英雄传说 1 带权问题 1.1 点带权 用num[i]记录节点 i i i 所在的集合的数量。 初始化&#xff1a;所有的num[i]都是 1 1 1&#xff0c;因为每个点…

公考学习|基于SprinBoot+vue的公考学习平台(源码+数据库+文档)

公考学习平台目录 目录 基于SprinBootvue的公考学习平台 一、前言 二、系统设计 三、系统功能设计 5.1用户信息管理 5.2 视频信息管理 5.3公告信息管理 5.4论坛信息管理 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&…

Spring 原理

&#x1f3a5; 个人主页&#xff1a;Dikz12&#x1f525;个人专栏&#xff1a;Spring学习之路&#x1f4d5;格言&#xff1a;吾愚多不敏&#xff0c;而愿加学欢迎大家&#x1f44d;点赞✍评论⭐收藏 目录 Bean的作用域 代码实现 观察Bean的作用域 Bean的生命周期 Spring …

[单片机课设]十字路口交通灯的设计

题目要求&#xff1a; 模拟交通灯运行情况。南北绿灯亮30秒&#xff0c;南北黄灯亮3秒&#xff0c;东西红灯亮33秒&#xff1b;南北红灯亮33秒&#xff0c;东西绿灯亮30秒&#xff0c;东西黄灯亮3秒&#xff1b;要求数码管同步显示时间的倒计时&#xff0c;用定时器实现延时。…

Java_从入门到JavaEE_07

一、数组的排序&#xff08;冒泡排序&#xff09; 原理&#xff1a; 从下标“0”开始&#xff0c;相邻两个元素依次进行比较&#xff0c;每次找出最大的往后移动。 规律&#xff1a;N个数字来排队&#xff0c;两两相比小靠前&#xff0c;外层循环N-1&#xff0c;内层循环N-1-i…

error LNK2001: 无法解析的外部符号 “__declspec(dllimport) public: __cdecl ......

运行程序时&#xff0c;报如上图所示错误&#xff0c;其中一条是&#xff1a; ReflectionProbe.obj : error LNK2001: 无法解析的外部符号 "__declspec(dllimport) public: __cdecl osg::Object::Object(bool)" (__imp_??0ObjectosgQEAA_NZ) 报这个错误一般是因为…

MongoDB详解

目录 一、MongoDB概述 1.MongoDB定义 2.MongoDB主要特点 2.1文档 2.2集合 2.3数据库 2.4数据模型 二、安装MongoDB 1.Windows安装MongoDB 1.1下载MongoDB 1.2安装MongoDB 1.3配置MongoDB 1.3.1可能遇到的问题 1.4安装一盒可视化工具 2.Linux安装MongoDB 2.1下载…

鸿蒙内核源码分析(用栈方式篇) | 程序运行场地谁提供的

精读内核源码就绕不过汇编语言&#xff0c;鸿蒙内核有6个汇编文件&#xff0c;读不懂它们就真的很难理解以下问题. 1.系统调用是如何实现的? 2.CPU是如何切换任务和进程上下文的? 3.硬件中断是如何处理的? 4.main函数到底是怎么来的? 5.开机最开始发生了什么? 6.关机…

WPF之XmlDataProvider使用

1&#xff0c;WPF XAML支持数据提供&#xff08;DataProvider&#xff09;&#xff0c;但其提供的数据只供查看不可进行修改&#xff0c;删除&#xff0c;添加等。 数据提供者都继承自System.Windows.DataSourceProvider类&#xff0c;目前&#xff0c;WPF只提供两个数据提供者…

Stream流操作

看到Stream流这个概念&#xff0c;我们很容易将其于IO流联系在一起&#xff0c;事实上&#xff0c;两者并没有什么关系&#xff0c;IO流是用于处理数据传输的&#xff0c;而Stream流则是用于操作集合的。 当然&#xff0c;为了方便我们区分&#xff0c;我们依旧在这里复习一下…

深度学习:基于Keras,使用长短期记忆神经网络模型LSTM和RMSProp优化算法进行销售预测分析

前言 系列专栏&#xff1a;【机器学习&#xff1a;项目实战100】【2024】✨︎ 在本专栏中不仅包含一些适合初学者的最新机器学习项目&#xff0c;每个项目都处理一组不同的问题&#xff0c;包括监督和无监督学习、分类、回归和聚类&#xff0c;而且涉及创建深度学习模型、处理非…

今日早报 每日精选15条新闻简报 每天一分钟 知晓天下事 5月5日,星期日

每天一分钟&#xff0c;知晓天下事&#xff01; 2024年5月5日 星期日 农历三月廿七 立夏 1、 近日国际金价大幅震荡&#xff0c;跌至近一个月新低。 2、 2024亚洲少年攀岩锦标赛&#xff1a;中国选手包揽U14和U12速度赛男女组前三名。 3、 马来西亚将进一步优化中国游客入境程…

【详细教程】手把手教你开通YouTube官方API接口(youtube data api v3)

文章目录 一、背景调查1.1 youtube介绍1.2 分析价值与意义1.3 API接口介绍 二、申请接口权限2.1、注册Google账号2.2、创建项目2.3、启用youtube data api v3服务2.4、创建凭据 三、后续发布 一、背景调查 1.1 youtube介绍 众所周知&#xff0c;youtube是目前全球最大的视频社…
最新文章