动态添加下拉框(v2+element)_vue下拉框动态绑定数据-程序员宅基地

技术标签: vue.js  

 点击动态添加下拉框并添加校验

 代码 prop 绑定的是v-mode对应的数据 ,否则校验不想生效

      <el-form-item label="网关数量" :required="true">
              <div v-for="(item, index) in dataForm.device.net" :key="index">
                <el-col :span="11" style="padding-right: 0">
                  <el-form-item
                    :prop="'device.net.' + index + '.hantu.type'"
                    :rules="rules.type"
                  >
                    <el-select v-model="item.hantu.type" placeholder="全部">
                      <el-option
                        v-for="item in netOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="11" style="padding-right: 0">
                  <el-form-item
                    :prop="'device.net.' + index + '.hantu.num'"
                    :rules="rules.num"
                  >
                    <el-input
                      v-model="item.hantu.num"
                      type="number"
                      min="1"
                      placeholder="数量"
                    ></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="2" style="padding-right: 0">
                  <img
                    v-if="
                      index === dataForm.device.net.length - 1 && index !== 0
                    "
                    @click="netdel(index)"
                    src="@/assets/image/customer_slices/minus.png"
                    alt="group_420"
                  />
                  <img
                    v-else
                    src="@/assets/image/customer_slices/plus.png"
                    @click="netAdd()"
                    alt="group_420"
                  />
                </el-col>
              </div>
            </el-form-item>

data里的数据

      dataForm: {
        //设备信息
        device: {
          net: [
            {
              hantu: {
                type: "",
                num: null,
              },
            },
          ],
          mccb: [
            {
              lb_mccb_004: [
                {
                  type: "",
                  num: null,
                },
              ],
            },
          ],
          mach: [
            {
              lb_mach_001: [
                {
                  pp: "",
                  type: "",
                  num: null,
                },
              ],
            },
          ],
        },
      },

事件往data里面添加数据

    //添加 网关数量
    netAdd() {
      this.dataForm.device.net.push({
        hantu: {
          type: "",
          num: null,
        },
      });
    },
    //删除 网关数量
    netdel(index) {
      console.log("idnex,", index);

      this.dataForm.device.net.splice(index, 1);
    },

 校验写法


      rules: {
        type: [{ required: true, message: "请选择", trigger: "change" }],

        num: [{ required: true, message: "数量不能为空", trigger: "blur" }],
      
    },

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_45367561/article/details/130651492

智能推荐

The new driver class is `com.mysql.cj.jdbc.Driver‘.-程序员宅基地

文章浏览阅读944次。记一次数据库连接数据库报错报错提示:Loading class com.mysql.jdbc.Driver'. This is deprecated. The new driver class iscom.mysql.cj.jdbc.Driver’. The driver is automatically registered via the SPI and manual loading of the driver class is generally unnecessary.原因:mysql驱动类D_the new driver class is `com.mysql.cj.jdbc.driver

python span()函数_Python正则表达式六种函数实例讲解-程序员宅基地

文章浏览阅读1.7w次,点赞8次,收藏41次。Python正则表达式是简介表达一组字符串的表达式,正则表达式可以方便的检查一个字符串是否与某种模式匹配。本文将结合实例给大家讲解六种在正则表达式中的常见函数,分别是re.match、re.search、re.findall、re.compile、re.split和re.sub。re.match() tch函数从头开始匹配,如果不是起始位置匹配成功的话,match函数的匹配结果就为none。re...._python span

SparkSQL & Spark on Hive & Hive on Spark-程序员宅基地

文章浏览阅读122次。刚开始接触Spark被Hive在Spark中的作用搞得云里雾里,这里简要介绍下,备忘。参考:https://blog.csdn.net/zuochang_liu/article/details/82292076SparkSQL:是一个完全不依赖Hive的SQL引擎。Spark On Hive通过sparksql,加载hive的配置文件,获取到hive的元数据信息;spark ..._sparksql hive on spark

Docker compose up -d 与 Docker restart 的区别_docker-compose up -d-程序员宅基地

文章浏览阅读1.3w次,点赞4次,收藏31次。在现场修改 docker 容器的代码或配置时,docker-compose up -d 和 docker restart 的区别。_docker-compose up -d

【ArcGIS Pro微课1000例】0005:ArcGIS Pro 2.5基于矢量数据制作拉伸三维地图案例_如何在arcgis中对矢量地图进行拉伸三维显示-程序员宅基地

文章浏览阅读2.3k次,点赞6次,收藏8次。ArcGIS Pro 2.5中,可以基于某个字段,对矢量数据进行拉伸,制作精美的三维地图。本文以中国省级行政区划数据为例,基于面积字段制作3d地图。文章目录1. 新建局部场景2. 地图符号化3. 三维矢量地图制作1. 新建局部场景打开ArcGIS Pro 2.5,新建局部场景项目,并保存。2. 地图符号化在省级行政区图层上右键→符号化。选择唯一值,并选择喜欢的色带。3. 三维矢量地图制作切换到【外观】选项卡。类型:基本高度字段:Area单位:米最终结果:..._如何在arcgis中对矢量地图进行拉伸三维显示

2023最新大数据毕设选题_2023大数据毕业生毕业设计-程序员宅基地

文章浏览阅读732次。Hi,大家好,大四的同学马上要开始毕业设计啦,大家做好准备了没!学长给大家详细整理了最新的 大数据专业 相关选题,对选题有任何疑问,都可以问学长哦~学长限时开放开题指导,对开题有任何不明白的,对某项技术或算法不理解的,不知道怎么下手毕设的,都可以问学长,学长会根据你的情况提供帮助,希望能帮助到你。_2023大数据毕业生毕业设计

随便推点

Android开发:设置背景图片_c#andriod 背景图-程序员宅基地

文章浏览阅读3w次,点赞7次,收藏12次。 在Android开发中,设置背景图片是一个既简单又常用的方法,由于本人现在需要同时做Android开发,所以Android的开发技能也要不断学习储备,不仅是为了给老板省钱,也是为了增加自己的竞争力。那么就来分享一下开发心得,给控件添加背景图的方法步骤,Android大牛请飘过,只分享给需要的人,今天分享在这里分享一下给添加背景图片的方法。 设置背景图片有两种方法,但是在..._c#andriod 背景图

网络通信技术-程序员宅基地

文章浏览阅读3.8k次,点赞2次,收藏12次。网络通信技术1. 基本概念1.1 接口1.2 表项查询方法1.2.1 内容寻址存储器2. 二层技术3. 三层技术1. 基本概念1.1 接口1.2 表项查询方法1.2.1 内容寻址存储器内容寻址存储器(Content Addressable Memory)CAM,是在传统的存储技术的基础上实现的联想记忆存储器,主要有读、写、查询操作。读操作:输入地址,返回该地址上的数据,读取速度与RAM相同;写操作:2. 二层技术3. 三层技术..._网络通信技术

简单的学生成绩管理系统(数组实现)_为什么用数组做成绩管理系统他的成绩只显示3和个数组-程序员宅基地

文章浏览阅读3.4k次,点赞6次,收藏18次。简单的学生成绩管理系统(数组实现)用java 数组写了一个简单的学生管理系统,没有连数据库,数据存放在内存,实现简单的增、删、改、查功能。一、运行图片二、部分代码package com.sky.demo;import javax.swing.text.Style;import java.util.Scanner;public class Service { Scanner scanner = new Scanner(System.in); //数组,静态初始化,分配大小 _为什么用数组做成绩管理系统他的成绩只显示3和个数组

基于Python的信用评分卡模型-give me some credit数据集,AUC 0.93 KS 0.71-程序员宅基地

文章浏览阅读4.2k次,点赞5次,收藏53次。在公众号「python风控模型」里回复关键字:学习资料,就可免费领取。 python风控模型 持牌照金融公司模型专家,教学主页 https://ke.qq.com/teacher/231469242?tuin=dcbf0_give me some credit

基于servlet+jsp 的 java 简单版商城项目_jsp servlet maven商城-程序员宅基地

文章浏览阅读1.4w次,点赞38次,收藏153次。一、 开发背景软件名称:买买买商城(servlet+jsp)使用对象:学习或了解过 java 基础课程,开始接触 javaWeb 的学生和软件爱好者二、 需求分析该买买买商城的用户包含普通用户和商城管理员。商城设置了权限验证,所有用户除了访问首页浏览商品外,均需输入账号、密码登录进入系统;商城管理员进入系统后可对用户信息、商品类别、商品信息、留言信息、新闻信息进行管理;普通用户注册成功并登..._jsp servlet maven商城

安装php_soap.dll,php如何安装soap扩展-程序员宅基地

文章浏览阅读529次。php安装soap扩展的方法:首先打开“php.ini”文件;然后添加代码为“extension = php_soap.dll”;最后修改soap配置项并保存即可。安装 SOAP 扩展对于 Windows 平台,需要在 php.ini 中加入如下代码:extension = php_soap.dll上面的工作完成之后,还需要注意的是 SOAP 扩展在配置文件中有独立的代码片段:[soap]; En..._php_soap.dll

推荐文章

热门文章

相关标签