首页 > 其他分享 >vue element 多层循环嵌套的表单校验

vue element 多层循环嵌套的表单校验

时间:2024-08-28 14:26:46浏览次数:9  
标签:vue name value 表单 嵌套 level2 level3 level3List element

最近vue2遇到的问题

有一个数据结构是多层嵌套

var level1list = [
    {
        name: 'level1-1',
        level2List:[
            {
                name: 'level2-1',
                level3List:[
                    {
                        name: 'level3-1',
                        value: ''
                    },
                    {
                        name: 'level3-2',
                        value: ''
                    },
                ]
            },
            {
                name: 'level2-2',
                level3List:[
                    {
                        name: 'level3-1',
                        value: ''
                    },
                    {
                        name: 'level3-2',
                        value: ''
                    },
                ]
            },
        ]
    },
    {
        name: 'level1-2',
        level2List:[
            {
                name: 'level2-1',
                level3List:[
                    {
                        name: 'level3-1',
                        value: ''
                    },
                    {
                        name: 'level3-2',
                        value: ''
                    },
                ]
            },
            {
                name: 'level2-2',
                level3List:[
                    {
                        name: 'level3-1',
                        value: ''
                    },
                    {
                        name: 'level3-2',
                        value: ''
                    },
                ]
            },
        ]
    },
]
<el-form :model="level1list" ref='wewe'>
    <div v-for="(l1, l1Index) in level1list">
        <el-row v-for="(l2, l2Index) in l1.level2list">
            <el-col v-for="(l3item, l3Index) in l2.level3list">
             <el-form-item :rules="l3item.rules" :prop="`level2list${l1Index}.level2list${l2Index}.level3list${l3Index}.value`">
                <input v-model="l3item.value"></input>
             </el-form-item>
            </el-col>
        </el-row>
    </div>
</el-form>

重点在于rules可以直接写到el-form-item上,prop需要根据层级来制定数据位置所在

大体方向是这样的,以上代码未经测试,只适用于个人解决问题后的记录。

 

标签:vue,name,value,表单,嵌套,level2,level3,level3List,element
From: https://www.cnblogs.com/HePandeFeng/p/18384591

相关文章

  • 基于ssm+vue高校旧书交易系统【开题+程序+论文】
    本系统(程序+源码)带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着高等教育的普及与知识更新的加速,高校内书籍资源的流通与再利用成为了一个亟待解决的问题。每年,大量学生因毕业、转专业等原因,手中积累了大量不再......
  • 基于ssm+vue高校教材管理系统【开题+程序+论文】
    本系统(程序+源码)带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着高等教育的快速发展,高校教材管理成为了一个日益复杂且关键的环节。传统的手工管理模式已难以满足现代高校对教材管理的精准性、高效性和透明度的......
  • 基于ssm+vue的宠物领养管理系统【开题+程序+论文】
    本系统(程序+源码)带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着现代社会生活节奏的加快,人们对于精神寄托与情感陪伴的需求日益增长,宠物作为家庭的一员,其角色日益重要。然而,宠物数量的激增也带来了诸多社会问题......
  • 基于ssm+vue高校科研信息管理系统【开题+程序+论文】
    本系统(程序+源码)带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着高等教育的快速发展,高校科研活动日益频繁且复杂,传统的科研信息管理方式已难以满足当前高效、精准的管理需求。科研信息的海量增长、科研人员的多......
  • 基于ssm+vue宠物爱好者交流网站的设计与实现【开题+程序+论文】
    本系统(程序+源码)带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着现代社会生活节奏的加快,宠物逐渐成为许多人生活中不可或缺的伴侣,它们不仅提供了情感上的慰藉,还丰富了人们的精神世界。然而,在享受宠物带来的快乐......
  • 基于ssm+vue高校人事管理系统的设计与实现【开题+程序+论文】
    本系统(程序+源码)带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容进度安排: 1.2024年11月18日至12月21日:查阅资料,拟定写作大纲,完成研究内容、现状、方法的研究等,提交开题报告;2.2024年12月21日至2024年3月13日:基本完成毕业......
  • 基于ssm+vue高校师生党建平台【开题+程序+论文】
    本系统(程序+源码)带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着信息技术的飞速发展和“互联网+”战略的深入实施,高校党建工作正逐步迈向数字化、智能化转型的新阶段。传统的党建管理模式面临着效率低下、信息......
  • 基于ssm+vue的瓮安特产商城【开题+程序+论文】
    本系统(程序+源码)带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着互联网的迅猛发展,电子商务已成为推动地方经济、促进特色产品外销的重要力量。瓮安县,地处贵州腹地,拥有丰富的自然资源和深厚的文化底蕴,孕育了众多......
  • Vue3项目开发——新闻发布管理系统(四)
    文章目录七、登录&注册页面设计开发2、登录&注册页面设计3、表单校验规则设置七、登录&注册页面设计开发2、登录&注册页面设计登录页面如下:点击“注册→”,切换到注册页面:点击“←返回”,又可以切换回登录页面。页面布局是这么设计的:1、整个页面通过L......
  • 【音视频通话】使用asp.net core 8+vue3 实现高效音视频通话
    引言在三年前,写智能小车的时候,当时小车上有一个摄像头需要采集,实现推拉流的操作,技术选型当时第一版用的是nginx的rtmp的推拉流,服务器的配置环境是centos,2H4G3M的一个配置,nginx的rtmp的延迟是20秒,超慢,后来研究了SRS以及ZLMediaKit这两个开源的推拉流服务器,没记错的话,两个......