交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • 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自适应高度的实现方法

    广而告之:
    热门推荐:
    详解用vue编写弹出框组件

    前言 最近研究了用vue编写弹出框的组件,发现其实这里面的门道还是有很多的。这篇文完全是用来记录总结下最近的学习成果,同时也希望能够帮得上正在学习纠结的你~ps:本文假设你已经了解vue2.0相关框架,因此适合有一定vue2.0基础的同学阅读。 设计组件的思考 其实单纯的编写···

    使用watch监听路由变化和watch监听对象的实例

    一、watch监听路由变化 解决办法: export default{ data(){ return{} }, watch:{ "$route":"getPath" // 监听事件 }, methods:{ getPath(){ let path = this.$roune.path; //或得当前路径 进行逻辑判断 } } } 二、watch监听对象 例子: <el-select v-model="form.region"···

    React Native验证码倒计时工具类分享

    本文实例为大家分享了React Native验证码倒计时工具类的具体代码,供大家参考,具体内容如下 因为以前直接用定时器,没去计算当前的时候,每次退出程序的时候,定时器一直不走,这个工具类简单的解决程序退出后台,定时器不走的bug,那么,直接上代码咯~~ /** * Created by ···

    浅谈JavaScript Math和Number对象

    1. Math 对象 1.1 介绍   Math 对象,是数学对象,提供对数据的数学计算,如:获取绝对值、向上取整等。无构造函数,无法被初始化,只提供静态属性和方法。 1.2 构造函数   无 :Math 对象无构造函数,无法被初始化,只提供静态属性和方法。 1.3 静态属性 1.3.1 Math.E···

    详解如何在css3打包后自动追加前缀插件:autoprefixer

    用vue-cli构建的项目脚手架已经帮你把autoprefixer的配置做好了,自己不需要做什么改动就会自动加前缀: 下面一起看看涉及到autoprefixer这个插件的一些配置: 1,postcss配置写在.postcssrc.js, 2,浏览器规则则写在package.json上, 3,开发环境(build/webpack.dev.conf.···

    如何辨别虚假网站权重值?只要去百度的官方百度索引检索网站关键

          我们生活在一个信息碎片化的时代。每天,我们都要面对很多复杂的内容信息。有些是正能量,有些是吸引人的路径。当然,搜索引擎优化行业不能孤军奋战。  利用虚假的高权重网站+数百万的内部连锁,做关键字排名,加上SEO培训快速盈利的方法···

    javascript页面倒计时实例

    本文实例讲述了javascript页面倒计时实现方法。分享给大家供大家参考。具体实现方法如下: <html> <head> </head> <body> <input type="text" name="mss" id="mss"/> <form action="./index.html"> <input type="text"···

    Vue实现用户自定义字段显示数据的方法

    如下: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <scri···

    织梦自定义图片字段报错Call to a member function GetInnerText()

    织梦程序当你添加了自定义图片字段时,前台打开当前栏目列表就会出现 Fatal error: Call to a member function GetInnerText() on string in /include/taglib/channel/img.lib.php on line 51 后台出现 Fatal error: Call to a member function GetInnerText···

    ie6 失真问题

    问题: <form...>下面的<input type="hidden" name="sortBy" id="sortBy" value="${sortBy}">占据物理位置的情况,代码如下: <form name="header_product_search_form" method="post" id="h···