VIP用户交流群:462197261 收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
tonglan
  • 当前位置:
  • vue elementUI 表单校验功能之数组多层嵌套

    在使用vue element-ui form表单渲染的时候,会遇到这样的数据结构:

    {
    "title":''123455,
    "email":'123456@qq.com',
    "list": [
          {
            "id": "quis consequat culpa ut pariatur",
            "name": "et quis irure dolore ullamco",
            "ompany": "sunt mollit",
            "address": "anim reprehenderit aliquip labore velit"
          },
          {
            "id": "",
            "name": "laborum magna",
            "company": "mollit esse ipsum quis",
            "address": "cillum dolore ex ut"
          },
        ]
    }

    在遇到某个字段值比如list是个数组,下面多个字段值还需要继续使用rules校验时候,直接给list下面的字段绑定prop="对应的字段值",是不能校验成功的,解决办法有二:

    1、在是数组的地方再套一个<el-form :model="当前子对象" v-for="遍历list这个数组"></el-form>

        给list数组下的字段直接还是绑定prop名称为原本的名称就可以;

    示例代码如下:

    <el-form :model="item" v-for="(item,index) in dataFields.list :key="index">
      <el-form-item label="name" prop="name" :rules="{ required: true, message: 'Required', trigger: 'blur' }">
       <el-input placeholder="name" v-model="item.name"></el-input>
      </el-form-item>
    </el-form>

     

    2、直接给list数组下对象的字段名称绑定为   数组下的名称

    示例代码如下:

    <div v-for="(item,index) in dataFields.list :key="index">
      <el-form-item label="name" :prop="`list[${index}].name`" :rules="{ required: true, message: 'Required', trigger: 'blur' }">
        <el-input placeholder="name" v-model="item.name"></el-input>
      </el-form-item>
    </div>

    这里list即为上面对象中的数组,datafields是最外层对象。

    总结

    以上所述是小编给大家介绍的vue elementUI 表单校验功能之数组多层嵌套,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对北冥有鱼网站的支持!
    如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

    您可能感兴趣的文章:

    • 基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
    • Vue ElementUi同时校验多个表单(巧用new promise)
    • vue elementUI table表格数据 滚动懒加载的实现方法
    • VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
    • VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法

    广而告之:
    热门推荐:
    有关HTML5中背景音乐的自动播放功能

    音乐的自动播放属性,这里也介绍一下: <audio controls="controls" autoplay="autoplay"> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> Y···

    vue项目中使用fetch的实现方法

    fetch的由来和定义 fetch的由来      众所周知,传统 Ajax (指 XMLHttpRequest)是最早出现的发送异步请求技术,其核心是使用XMLHttpRequest对象。但是它也存在一些令人头疼的问题:XHR 是一个设计粗糙的 API,不符合关注分离的原则;配置和调用方式···

    用按钮触发事件的方式实现背景色的闪烁效果

    要实现背景色闪烁效果只要如下代码加入到<body>区域中即可 复制代码 代码如下:   <script language="Javascript">   function blinkit()   {    intrvl=0;    for(nTimes=0;nTimes<3;nTimes++)    {    intrvl += 200;    setTimeout("documen···

    去掉dedecms织梦系统首页后面的index.html

    怎么去掉dedecms织梦首页后面的index.html?大家知道dedecms系统按照默认的设置安装后,访问首页时候,域名后面总跟随着一个/index.html的后缀,看起来域名变得很长了,另一个也不利于优化,首页权重会分散。  当然,有的空间可能默认显示的就是没带index.html···

    mysql(5.6及以下)解析json的方法实例详解

    mysql(5.6及以下)解析json #json解析函数 DELIMITER $$ DROP FUNCTION IF EXISTS `json_extract_c`$$ CREATE FUNCTION `json_extract_c`( details TEXT, required_field VARCHAR (255) ) RETURNS TEXT CHARSET latin1 BEGIN SET details = SUBSTRING_INDEX(details, "{", ···

    织梦中不同的栏目,调用不同的banner图

    首页、联系我们、公司介绍,等调用默认banner~~~这就不说了。 它的产品  比如: 产品大类A(封面页,typeid=111)-小类1 小类2 小类3 小类4 产品大类B(封面页 typeid=222)-小类5 小类6 小类7 小类8 产品大类C(封面页 typeid=333)-小类9 小类10 小类11 小···

    一个经典的PHP验证码类分享

    我们通过PHP的GD库图像处理内容,设计一个验证码类Vcode。将该类声明在文件vcode.class.php中,并通过面向对象的特性将一些实现的细节封装在该类中。只要在创建对象时,为构造方法提供三个参数,包括创建验证码图片的宽度、高度及验证码字母个数,就可以成功创建一个验证码类的···

    php 服务端集成支付宝APP支付实例

    支付宝支付分为了很多种场景,这里只讲述支付宝APP支付功能集成,期间遇到了特别大的坑,因此我简单描述下集成过程,并概述遇到的问题及解决方案 由于公司业务简单,只支持支付宝支付,而无需关心退款,查询等等额外功能,因此该篇内容仅仅讲述支付宝支付接口时服务端如何准备A···

    PHP记录页面停留时间的方法

    本文实例讲述了PHP记录页面停留时间的方法。分享给大家供大家参考,具体如下: 首先在要监控的页面添加JS如下 <script> var dt1 = new Date(); window.onbeforeunload = function(){ var dt2 = new Date(); var ms = dt2.getTime() - dt1.getTime(); var img = ne···

    基于unique与primary约束的区别分析

       定义了UNIQUE约束的字段中不能包含重复值,可以为一个或多个字段定义UNIQUE约束,因此,UNIQUE即可以在字段级也可以在表级定义,在UNIQUE约束的字段上可以包含空值. ORACLE自动会为具有PRIMARY KEY约束的字段(主码字段)建立一个唯一索引和一个NOT NULL约束,定义···