vue+element多级v-for循环表单验证

最新推荐文章于 2023-07-25 18:20:37 发布
最新推荐文章于 2023-07-25 18:20:37 发布
阅读量6.6k 收藏 22
点赞数 5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44840212/article/details/89922044
版权

如下图所示：v-for循环生成的不定个数不定层级的表单验证，可以手动新增或删除，现以两层循环为例
在这里插入图片描述
验证方法如下：先看结构
在这里插入图片描述
首先：要为每个form-item添加rules
其次：item要绑定动态的prop,如上，循环的titleParams拼接对应的下标io再拼接对应绑定的字段名称
此处注意：多级循环中，下级循环item绑定的prop要从第一级循环开始拼接，如上图中的二级循环，‘titlePatams’为一级循环绑定的数据拼接一级的下标io,再拼接二级循环的数据’nextLevelTitleParam’拼接二级循环的下标it和对应的字段’titleName’

当然此处的io、it为简写不建议如此使用，各位学者根据自己编码习惯使用便于阅读的变量，‘titleParams’后和’nextLevelTitleParam’前后加’.'不要忘记，此处就不赘述了

下图为绑定的校验规则作为参考，和element官网校验没什么区别
在这里插入图片描述
这是最近项目中遇到的问题，经过参考各位大神的文章，自己整理出来供学者参考，谢谢

跳恰恰的夫子
关注
  • 5
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
vue + element ui: ＜el-from＞表单用v-for动态渲染时 应该如何填写rules、prop
weixin_43837555的博客
12-28 2860
1.使用v-for渲染时 由于从后端获取到的对象是一个不固定长度的列表（会员等级），因此该字段只能通过v-for来实现 <el-form :model="productParam" ref="productPromotionForm" :rules="promotionRules" label-width="90px" size="small"> <el-form-item v-show="productParam.promotionType===2"> <div v-
vue使用Element组件时v-for循环里的表单项验证
weixin_33743248的博客
06-27 1000
标题描述看起来有些复杂，有vue，Element，又有表单验证，还有v-for循环？是不是有点乱？不过我相信开发中遇到过此问题的同学，一看就明白我说的意思了。 首先Element组件有一套完善的表单验证方法，官方文档写的也很清楚：Element表单验证API，正常按照官方文档添加rules规则，需要验证的表单项设置prop，然后提交表单时...
vue中使用v-for进行多级菜单的遍历
chengxue_123的博客
10-27 4842
在vue中data中的结构：
vue+Element项目中v-for循环+表单验证
TianXuab的博客
07-25 2088
如果在Form 表单里有通过v-for动态生成，如何设置验证呢？
vue+Element项目中v-for动态数据循环表单验证的处理
qq_33235680的博客
10-27 2585
1.功能需求 如果表单项里有通过v-for动态生成的表单项，如何设置验证呢？ 2.Dom结构如下 表单验证的时候： prop改为 ：prop，形式为’List.’+index+’.startDate’ List.’+index+’.startDate就是数据结构与数据 每一个循环中的都需要加：rules <el-form :model="resumes" size="mini" :rules="rules" ref="resumes"> <div v-for="(item, i
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip
最新发布
04-10
vue-element-perfect 是一个后台前端解决方案,它使用了最新的前端技术栈、动态路由，权限验证，并且有着丰富的组件,企业级中后台解决方案，可免费商用，同时支持PC、平板、手机 ## 项目功能 - 使用Vue3.0开发，单...
vue+element实现sku表格
02-12
Element UI在Vue.js的基础上提供了诸如按钮、表单、表格、提示等常用组件。在本项目中，我们将主要使用`el-table`组件来创建库存表格。`el-table`支持多级表头、行合并、自定义列模板等功能，非常适合构建复杂的数据...
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
12-29
先看看ElementUI里关于el-table的template数据结构： xss=removed> label=日期 width=180> label=姓名 width=180> <el-table-
基于vue和element-ui实现的表单设计器 通过拖拽方式快速生成一个表单页面
06-08
基于vue和element-ui实现的表单设计器。通过拖拽方式快速生成一个表单页面，表单可以导出json格式,也可以将其他人绘制的表单通过json导入方式进行还原。针对选择性控件（radio，select，checkbox）提供选择后触发...
批量添加数据的表单界面（表单含树形下拉框）vue + element
03-24
在本项目"批量添加数据的表单界面（表单含树形下拉框）vue + element"中，我们将重点关注如何利用Vue.js和Element UI来实现这样一个功能。 首先，Vue.js是基于组件化的前端框架，它允许我们将应用拆分为独立可复用...
Element-ui运用table组件并且使用用v-for
weixin_51641718的博客
03-18 5235
实现功能 实现一个如果数据充足，则会无线向右延申 利用Element-ui的多级表头实现，由于里面行数需要根据数据的多少确定，所以需要通过v-for实现 但是利用了v-for结果并不显示 这是因为Element-ui的prop属性对应你返回的属性名字 解决做法 添加 <el-table-column label="速" align="center"> <template slot-scope="scope"> ...
elementUI使用v-for创建无限级导航栏—— 递归组件
qq_30351747的博客
05-04 3417
elementUI使用v-for创建无限级导航栏—— 递归组件 直接copy，不需要墨迹 说明： 根据返回的数据动态循环渲染菜单，是否具有子级目录递归创建所有目录并具有复用性，动态绑定相关属性； 解决步骤： 1、使用element组件（具体步骤不在赘述） 2、先创建公共组件 （1）在第一级菜单循环过程中，如判断出当前菜单存在着子级菜单，渲染出当前菜单，并将当前菜单的子级属性（例如：child：[数组]），利用子组件传参的方式，传给我们现在正在封装的组件（俗称：无限套娃）。 递归组件封装 MenuTree.v
elementui el-input，v-for循环、校验、消除校验
weixin_46041322的博客
12-30 7068
第一步；页面 el-input循环 <template> <el-form :model="ruleForm" :rules="rules" ref="ruleForm"> <div v-for="(item,index) in ruleForm.mailSet" :key="index"> <el-form-item > <el-input v-model.trim="ruleForm
element-ui v-for循环表格
qq_61033782的博客
08-24 4162
再某种情况下我们会有这样一个需求 一个页面有多个弹窗表格 但是又不能重复写多个表格 写多个会显得我们的代码难以维护。样式什么的可以忽略 直接cv即刻使用 主要靠父亲传一个数组来控制表头显示什么以及他的值。
elementui的el-table的v-for遍历二维数组显示
热门推荐
青烟小生的博客
09-25 2万+
elementUI的el-table的循环遍历二维数组，v-for循环遍历二维数组并且显示成表格的形式 这些其实就是Excel表格的数据转化下来先是查看数组类型的样式全部的数据 async reafXls(){ let res = await this.$api.teaback.readXls() console.log(res); this.dataList = res.excelObj this.goodsList = res.excelObj.slice(
element v-for循环列表的表单校验（动态绑定的数据)
小猪的博客
12-21 3900
1、一层循环时嵌套： html： <el-form :model="addform" ref="addform" :rules="rules"> <el-form-item label="资源" required label-width="120px"> <el-row v-for="(item,i) in addform.resourceList" :key="i"> <el-col :span="10">
vue使用Element组件时v-for循环里的表单项验证方法
jrsJW的博客
08-01 575
转载至：https://www.jb51.net/article/142750.htm 标题描述看起来有些复杂，有vue，Element，又有表单验证，还有v-for循环？是不是有点乱？不过我相信开发中遇到过此问题的同学，一看就明白我说的意思了。 首先Element组件有一套完善的表单验证方法，官方文档写的也很清楚：Element表单验证API，正常按照官方文档添加rules规则，需要验证的表单项...
Vue.js学习笔记——6.v-for指令的使用
土拨鼠的忧伤的博客
11-24 2077
v-for指令的使用一、v-for的基本使用 一、v-for的基本使用 当我们有一组数据需要进行渲染时，可以使用v-for循环遍历渲染，v-for能够遍历数组或对象。 作用：循环遍历 语法： <element v-for="item in arr"></element> <element v-for="(item,index) in arr"></element> <element v-for="(value,key) in obj"></e
vue+elementui v-for 循环卡片列表
lrbtony的博客
01-08 8631
for循环实现循环卡片样式
VUE+element el-button循环显示
07-11
要循环显示多个 Element UI 的 el-button，你可以使用 Vue 的 v-for 指令。下面是一个示例代码，演示了如何在 Vue 中循环显示多个 el-button： ```html <el-button v-for="(button, index) in buttons" :key=...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值