动态添加下拉框(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

智能推荐

SE壳C#程序-CrackMe-爆破 By:凉游浅笔深画眉 / Net7Cracker-程序员宅基地

文章浏览阅读644次。【文章标题】: 【SE壳C#程序-CrackMe-爆破】文字视频记录!【文章作者】: 凉游浅笔深画眉【软件名称】: CM区好冷清,我来发一个吧!小小草莓【下载地址】: http://www.52pojie.cn/thread-243089-1-1.html【加壳方式】: SE壳【使用工具】: OD+WinHex+CFF Explorer【作者声明】: 只是感兴趣,没有其他目的。失误之处敬请诸位大..._凉游浅笔画深眉是啥

安卓ttf格式的字体包_锤子科技定制字体 | Smartisan T黑-程序员宅基地

文章浏览阅读2k次。Smartisan·T黑2019年10月31日19:30分在北京工业大学奥林匹克体育馆举行的坚果手机2019新品发布会上,Smartisan OS产品经理朱海舟正式发布了Smartisan OS 7.0。随着全新的Smartisan OS 7.0一同亮相的还有锤子科技向方正字库订制的系统UI字体:Smartisan T黑(锤子T黑)。锤子T黑有着几乎完美的特质:灰度均衡、重心统一、中宫内..._smartisan t黑

Java中extends与implements使用方法_implements在java中的格式-程序员宅基地

文章浏览阅读4.8k次,点赞4次,收藏6次。一.extends关键字 extends是实现(单)继承(一个类)的关键字,通过使用extends 来显式地指明当前类继承的父类。只要那个类不是声明为final或者那个类定义为abstract的就能继承。其基本声明格式如下: [修饰符] class 子类名 extends 父类名{ 类体 }_implements在java中的格式

LTE物理层概述及基本概念讲解_lte linear-程序员宅基地

文章浏览阅读2.1w次,点赞9次,收藏70次。There are two types of frame structure in the LTE standard, Type 1 and Type 2. Type 1 uses Frequency Division Duplexing (uplink and downlink separated by frequency), and TDD uses Time Division Duple_lte linear

Spring @Autowired注入为 null 的原因总结_spring autowired null-程序员宅基地

文章浏览阅读3.3w次,点赞13次,收藏37次。原因配置缺失,比如为开启注解扫描驱动、注入组件为注册;使用 new 关键字创建的对象不受spring容器管理,无法注入;注入静态变量, 静态变量/类变量不是对象的属性,而是一个类的属性,spring则是基于对象层面上的依赖注入。静态注入的三种方式在一些工具类中可能会依赖 service 层的对象,一般情况下工具类都是使用静态方法,对应的成员变量也需要声明为静态的,此时如果直接使用 @..._spring autowired null

红队眼中的防守弱点_红队 漏洞总是修复不好-程序员宅基地

文章浏览阅读207次。通过对政府、央企、银行、证券、民生、运营商、互联网等行业的红队实战工作,发现各行业安全防护具备如下特点。一、 资产混乱、隔离策略不严格除了大型银行之外,很多行业对自身资产情况比较混乱,没有严格的访问控制(ACL)策略,且办公网和互联网之间大部分相通,可以直接使远程控制程序上线。除了大型银行与互联网行业外,其他很多行业在DMZ区和办公网之间不做或很少做隔离,网络区域划分也不严格,给了红队很多可乘之机。此外,几乎所有行业的下级单位和上级单位的业务网都可以互通。而除了大型银行之外,其他很多行业的办公网也大_红队 漏洞总是修复不好

随便推点

exe->startsap_startsap command not found-程序员宅基地

文章浏览阅读2.4k次。#!/bin/sh -#--------------------------------------------------------------------------version(){ echo '# @(#) $Id: //bas/742_REL/src/krn/startscripts/startsap#2 $'}## NAME : startsap or stopsa_startsap command not found

关于背景图片background-attachment: fixed属性在Chrome浏览器中失效的问题解决。_background-attachment: fixed;失效-程序员宅基地

文章浏览阅读2.7k次。关于背景图片background-attachment: fixed;属性在谷歌浏览器中失效的问题解决。最近在做文件打印的功能操作。我选择使用简单易用的window.print()来打印整个页面。具体操作网上有很多相关的方法,这里不再一一叙述。只在此说一下在打印背景图片时遇到的问题及解决方法。首先,背景图片设置好之后我对其进行平铺和固定设置如图所示。我的本意是将一个不大的图片平铺整个页面,并且打印时即使页面内容过多导致分页也能继续显示背景图片。但我使用谷歌浏览器时,出现问题。background-a_background-attachment: fixed;失效

【Linux】VI和Vim的区别_linux vi和vim有什么区别-程序员宅基地

文章浏览阅读226次。vi 和vim 的区别它们都是多模式编辑器,不同的是vim 是vi的升级版本,它不仅兼容vi的所有指令,而且还有一些新的特性在里面。vim的这些优势主要体现在以下几个方面:1、多级撤消我们知道在vi里,按 u只能撤消上次命令,而在vim里可以无限制的撤消。2、易用性vi只能运行于unix中,而vim不仅可以运行于unix,windows ,mac等多操作平台。3、语法加亮vi..._linux vi和vim有什么区别

Oracle数据库 入门教程-程序员宅基地

文章浏览阅读10w+次,点赞158次,收藏1.3k次。Oracle数据库1.1 数据库环境安装1.Oracle数据库产品是免费的,我们可以从Oracle的官方网站(http://www.oracle.com)下载到程序安装包,Oracle在Windows下的安装非常方便,安装开始后,一直点击安装程序的“下一步”即可。2. 下载Oracle10g后,解压到一个文件夹下,单击“setup.exe”文件即可启动安装界面。。填写全局数据库名,以及管理员的密..._oracle数据库

夜神模拟器绕过手势密码登录_夜神模拟器向上滑动解锁-程序员宅基地

文章浏览阅读2.2k次,点赞6次,收藏8次。1、找到nox的目录(本人不是默认安装,路径为:D:\Program Files\Nox\Nox\bin)2、打开cmd3、接着输入adb shell4、继续输入cd data\system5、输入ls查看data\system中的文件,如果设置了密码会有gesture.key(手势密码)或者password.key(密码)6、若设置的是图案密码请继续输入命令:rm gesture.key,若设置的是单纯密码请输入命令:rm password.key7、输入reboot命令或者手动重启手机生效,_夜神模拟器向上滑动解锁

matlab 怎么使用function,请问在matlab中function 函数怎么用?-程序员宅基地

文章浏览阅读826次。蛊毒传说问题描述:例如在命令窗口中 functionNumber=recrgb(Image,Image_HSV,h,w)电脑就会提示:Function业,但是在我的机子上运行的时候,我的matlab不认识load函数,我很郁闷,我是2007的版本,你的如果版本高,应该可以认识load函数件和所用图片放到matlab运行时所在的文件夹中,然后在commandwindow里运行Main即可,但是还有一..._matlab中function函数的用法