vue elementUI 表单校验功能之数组多层嵌套


Posted in Javascript onJune 04, 2019

在使用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 表单校验功能之数组多层嵌套,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jQuery中选择器小问题(新人难免遇到)
Mar 31 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
Jun 06 Javascript
javascript学习笔记(三)BOM和DOM详解
Sep 30 Javascript
jquery验证手机号是否正确实例讲解
Nov 17 Javascript
JavaScript 数组some()和filter()的用法及区别
May 20 Javascript
最佳的JavaScript错误处理实践
Jul 16 Javascript
轻松掌握JavaScript装饰者模式
Aug 27 Javascript
jQuery实现鼠标滑过图片移动特效
Dec 08 Javascript
数组Array的排序sort方法
Feb 17 Javascript
Vue.extend构造器的详解
Jul 17 Javascript
关于JavaScript的单双引号嵌套问题
Aug 20 Javascript
bootstrap时间插件daterangepicker使用详解
Oct 19 Javascript
小程序根据手机机型设置自定义底部导航距离
Jun 04 #Javascript
js回文数的4种判断方法示例
Jun 04 #Javascript
Vue对象赋值视图不更新问题及解决方法
Jun 03 #Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
Jun 03 #Javascript
JavaScript之数组扁平化详解
Jun 03 #Javascript
JavaScript从原型到原型链深入理解
Jun 03 #Javascript
生产制造追溯系统之再说条码打印
Jun 03 #Javascript
You might like
Php图像处理类代码分享
2012/01/19 PHP
php防止用户重复提交表单
2015/11/02 PHP
javascript 多浏览器 事件大全
2010/03/23 Javascript
return false;和e.preventDefault();的区别
2010/07/11 Javascript
IE的有条件注释判定IE版本详解(附实例代码)
2012/01/04 Javascript
javascript实现浏览器窗口传递参数的方法
2014/09/03 Javascript
node.js中的http.response.addTrailers方法使用说明
2014/12/14 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
2015/11/18 Javascript
JavaScript动态插入CSS的方法
2015/12/10 Javascript
javascript设置和获取cookie的方法实例详解
2016/01/05 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
2017/02/18 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
2017/06/13 Javascript
import与export在node.js中的使用详解
2017/09/28 Javascript
vue.js移动数组位置,同时更新视图的方法
2018/03/08 Javascript
教你如何编写Vue.js的单元测试的方法
2018/10/17 Javascript
解决vue.js提交数组时出现数组下标的问题
2019/11/05 Javascript
基于JavaScript实现贪吃蛇游戏
2020/03/16 Javascript
编写一个javascript元循环求值器的方法
2020/04/14 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
2020/07/21 Javascript
Vue中 axios delete请求参数操作
2020/08/25 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
2020/10/02 Javascript
wxpython学习笔记(推荐查看)
2014/06/09 Python
web.py 十分钟创建简易博客实现代码
2016/04/22 Python
Python贪吃蛇游戏编写代码
2020/10/26 Python
Python爬虫实现爬取京东手机页面的图片(实例代码)
2017/11/30 Python
python基于http下载视频或音频
2018/06/20 Python
使用python语言,比较两个字符串是否相同的实例
2018/06/29 Python
基于Python的ModbusTCP客户端实现详解
2019/07/13 Python
简单了解Python3 bytes和str类型的区别和联系
2019/12/19 Python
Python类及获取对象属性方法解析
2020/06/15 Python
python 求两个向量的顺时针夹角操作
2021/03/04 Python
报考公务员诚信承诺书
2014/08/29 职场文书
2014领导干部四风问题查摆思想汇报
2014/09/13 职场文书
2014年酒店前台工作总结
2014/11/14 职场文书
世界环境日活动总结
2015/02/11 职场文书
人事任命通知
2015/04/20 职场文书