在使用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是最外层对象。

参考链接:

https://segmentfault.com/a/1190000014366951

vue elementUI 表单校验(数组多层嵌套)的更多相关文章

  1. vue elementUI 表单校验(多层嵌套)

    <template> <el-form :model="formData" :rules="formRule" ref="formD ...

  2. Vue Element-ui表单校验规则,你掌握了哪些?

    1.前言   Element-ui表单校验规则,使得错误提示可以直接在form-item下面显示,无需弹出框,因此还是很好用的.   我在做了登录页面的表单校验后,一度以为我已经很了解表单的校验规则. ...

  3. Vue.js表单校验;动画指令;避免内存泄露。

    Vue.js表单校验: 动画指令:创建自定义的滚动指令. 避免内存泄露. 避免内存泄露 在单页面应用开发时SPA,用户无需刷新浏览器.所以javascript应用需要自行清理组件来防止内存占用不断增长 ...

  4. 【转】vue.js表单校验详解

    官方文档:https://monterail.github.io/vuelidate/ https://github.com/monterail/vuelidate 1.npm安装vue-valida ...

  5. vue+element表单校验功能

    要实现这个功能其实并不难,element组件直接用就可以, 但是我在使用过程中碰到了几个坑,就记录下来,分享给大家,避免落坑,话不多说,直接上过程...... 表单校验功能:   实现这个功能,总共分 ...

  6. vue + elementui表单重置 resetFields问题(无法重置表单)

    问题: elementui在重置表单时,无法使用this.$refs['formRefVal'].resetFields()清空表单数据; elementui 设置rules后没有效果 解决方法: 1 ...

  7. element-UI 表单校验失效处理

    1.el-form-item 的 prop属性绑定的要是字符串: eg: :prop="'answer[' + 0 + ']' "       //而不是    :prop=&qu ...

  8. element-ui 表单校验 Rules 配置 常用黑科技

    type 指示type要使用的验证器.可识别的类型值为: string:类型必须为string.type 默认是 string // 校验 string: [ {type: 'string', mes ...

  9. Vue Elementui 表单必填项和非必填项label文字对齐的简单方式

    1. 不好的方式 很长时间以来都是用改写form-item样式来使得必填项和非必填项保证label对齐,这样需要改写系统样式,还要在相应的item上引用,代码量增多,示例如下(不推荐) <tem ...

随机推荐

  1. 补题—Codeforces Round #346 (Div. 2) _智商欠费系列

    这次的题目相对容易 但是智商依旧不够用 原因有三点 1.英文水平堪忧 2 逻辑不严密 3 细节掌握不够好 传送门 http://codeforces.com/contest/659 A 题目大意 圆环 ...

  2. iOS的设计备忘录/资源集合(新手快速开发)

    iOS的设计备忘录 随着iOS7更新,风格走上扁平化,大部分iOS设计师及程序员都需要对自己的软件做相关调整,尺寸.Icon.UI等等,我在这里总结一下相关资料,以及提供一些关于iOS7设计素材. 一 ...

  3. 并查集+思维——The Door Problem

    一.问题描述(题目链接) 有n个门和m个开关,每个开关可以控制任意多的门,每个门严格的只有两个开关控制,问能否通过操作某些开关使得所有门都打开.(给出门的初始状态). 二.问题分析 大部分开关问题首先 ...

  4. core 下使用 autofac

    依赖注入小伙伴们比较常了,这里只说core 下autofac依赖注入的使用 ,不多费话,直接代码. 在 Startup.cs里 public void ConfigureServices(IServi ...

  5. 数据库:SQL Server自增长列的编号

    SQL Server表中的自动编号ID重新开始排列 说法一: 有两种方法: 方法1: truncate table 你的表名 --这样不但将数据删除,而且可以重新置位identity属性的字段. 方法 ...

  6. Caused by: java.lang.ClassNotFoundException: java.com.bj186.ssm.controller.UserController

    在搭建SpringMVC的时候,遇到的这个问题真的很奇葩, 找不到UserController这个类 这明明不就在工程目录下吗? 经过了一番艰苦卓绝的斗争, 才发现原来是包导少了 之前导入的包是: & ...

  7. nodejs 设置安装包路径的取消和安装cnpm

    安装cnpm: $ npm install -g cnpm --registry=https://registry.npm.taobao.org 配置nodejs的npm安装包路径: npm conf ...

  8. vue-router介绍及简单使用

    一.vue-router介绍 vue-router是vue官方提供的一个路由框架,控制页面路由,使用较为方便. 1.路由模式 hash(浏览器环境默认值),使用 URL hash 值来作路由,支持所有 ...

  9. 【简●解】 LG P2730 【魔板 Magic Squares】

    LG P2730 [魔板 Magic Squares] [题目背景] 在成功地发明了魔方之后,鲁比克先生发明了它的二维版本,称作魔板.这是一张有8个大小相同的格子的魔板: 1 2 3 4 8 7 6 ...

  10. 永久激活IDEA的方法

    第一步,下载破解补丁jetbrains-agent.jar 链接:https://pan.baidu.com/s/15x6dzOjveMkHlgHJT0PBWg提取码:2ykx 第二步,将下载的破解补 ...