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 相关文章推荐
解密效果
Jun 23 Javascript
JavaScript中令你抓狂的魔术变量
Nov 30 Javascript
javascript concat数组累加 示例
Sep 03 Javascript
Javascript 中介者模式实例
Dec 16 Javascript
JQuery写动态树示例代码
Jul 31 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 Javascript
Javascript中从学习bind到实现bind的过程
Jan 05 Javascript
详解webpack自定义loader初探
Aug 29 Javascript
Bootstrap Paginator+PageHelper实现分页效果
Dec 29 Javascript
JavaScript canvas绘制渐变颜色的矩形
Feb 18 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
May 19 Javascript
详解JS预解析原理
Jun 16 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
利用 window_onload 实现select默认选择
2006/10/09 PHP
PHP5中新增stdClass 内部保留类
2011/06/13 PHP
php各种编码集详解和以及在什么情况下进行使用
2011/09/11 PHP
php addslashes 利用递归实现使用反斜线引用字符串
2013/08/05 PHP
PHP中error_reporting()用法详解
2015/08/31 PHP
WordPress中用于创建以及获取侧边栏的PHP函数讲解
2015/12/29 PHP
JavaScript脚本性能的优化方法
2007/02/02 Javascript
JavaScript使用cookie
2007/02/02 Javascript
javascript Ext JS 状态默认存储时间
2009/02/15 Javascript
js中有关IE版本检测
2012/01/04 Javascript
邮箱下拉自动填充选择示例代码附图
2014/04/03 Javascript
javascript记住用户名和登录密码(两种方式)
2015/08/04 Javascript
Javascript设计模式之观察者模式(推荐)
2016/03/29 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
2016/05/03 Javascript
jQuery实现根据生日计算年龄 星座 生肖
2016/11/23 Javascript
史上最全JavaScript常用的简写技巧(推荐)
2017/08/17 Javascript
jsTree事件和交互以及插件plugins详解
2017/08/29 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
2018/01/22 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
2018/09/03 Javascript
nodejs实现范围请求的实现代码
2018/10/12 NodeJs
小程序指纹验证的实现代码
2018/12/04 Javascript
js中事件对象和事件委托的介绍
2019/01/21 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
2019/06/12 jQuery
基于原生js实现判断元素是否有指定class名
2020/07/11 Javascript
Python实现栈的方法
2015/05/26 Python
Python抓取电影天堂电影信息的代码
2016/04/07 Python
python学生管理系统代码实现
2020/04/05 Python
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
不归路系列:Python入门之旅-一定要注意缩进!!!(推荐)
2019/04/16 Python
运用PyTorch动手搭建一个共享单车预测器
2019/08/06 Python
人力资源管理专业毕业生推荐信
2013/11/07 职场文书
技术合作协议书范本
2014/04/18 职场文书
中国梦读书活动总结
2014/07/10 职场文书
2014银行领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
2015年简历自我评价范文
2015/03/11 职场文书
公司放假通知怎么写
2015/04/15 职场文书