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 相关文章推荐
高效率JavaScript编写技巧整理
Aug 23 Javascript
javascript实现淘宝幻灯片广告展示效果
Apr 27 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
Jan 22 Javascript
jQuery动态改变多行文本框高度的方法
Sep 07 Javascript
详解基于vue的移动web app页面缓存解决方案
Aug 03 Javascript
Javascript中绑定click事件的四种方式介绍
Oct 26 Javascript
JS实现马赛克图片效果完整示例
Apr 13 Javascript
vue无限轮播插件代码实例
May 10 Javascript
原生js实现抽奖小游戏
Jun 27 Javascript
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
jQuery实现广告显示和隐藏动画
Jul 04 jQuery
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
小程序根据手机机型设置自定义底部导航距离
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错误日志 display_errors与log_errors的区别
2012/10/09 PHP
解析php中获取系统信息的方法
2013/06/25 PHP
ini_set的用法介绍
2014/01/07 PHP
让PHP显示Facebook的粉丝数量方法
2014/01/08 PHP
PHP文件与目录操作示例
2016/12/24 PHP
PHP PDOStatement::errorCode讲解
2019/01/31 PHP
基于jQuery的简单九宫格实现代码
2012/08/09 Javascript
jQuery获取cookie值及删除cookie用法实例
2016/04/15 Javascript
js将json格式的对象拼接成复杂的url参数方法
2016/05/25 Javascript
基于slideout.js实现移动端侧边栏滑动特效
2016/11/28 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
2016/12/02 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
2016/12/27 Javascript
jQuery实现一个简单的轮播图
2017/02/19 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
2017/07/17 Javascript
Vue data的数据响应式到底是如何实现的
2020/02/11 Javascript
在Webpack中用url-loader处理图片和字体的问题
2020/04/28 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
2020/05/31 Javascript
vue渲染方式render和template的区别
2020/06/05 Javascript
python使用心得之获得github代码库列表
2014/06/25 Python
Python采用Django开发自己的博客系统
2020/09/29 Python
Numpy数组array和矩阵matrix转换方法
2019/08/05 Python
Python实现栈和队列的简单操作方法示例
2019/11/29 Python
python多进程重复加载的解决方式
2019/12/13 Python
Python读写操作csv和excle文件代码实例
2020/03/16 Python
在PyTorch中使用标签平滑正则化的问题
2020/04/03 Python
python 爬虫如何实现百度翻译
2020/11/16 Python
html5移动端自适应布局的实现
2020/04/15 HTML / CSS
舞蹈比赛获奖感言
2014/02/04 职场文书
人事专员职责
2014/02/22 职场文书
法制报告会主持词
2014/04/02 职场文书
司法助理专业自荐书
2014/06/13 职场文书
2015年小学生新年寄语
2014/12/08 职场文书
师德承诺书
2015/01/20 职场文书
六一儿童节开幕词
2015/01/29 职场文书
淮海战役观后感
2015/06/11 职场文书