前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >element-ui 对复杂对象型数组进行表单验证

element-ui 对复杂对象型数组进行表单验证

作者头像
用户2323866
修改2021-06-23 18:05:07
3.4K0
修改2021-06-23 18:05:07
举报
文章被收录于专栏:技术派技术派

1、需求场景,需要动态修改物流信息对象,并需要验证的复杂数据对象,所以我们只分析怎样验证复杂数据结构的数据,也就是上面的‘dialogFrom.options’中的对象数组。如何遍历该数组,来给每个元素添加验证呢?

表单数据:

代码语言:javascript
复制
dialogFrom:{
            options: [{
              "id":1,
              "name":"323",
              "itemTime":"2020-12-25 13:46:57",
              "times":"2020-12-25 13:46:57"
            },{
              "id":2,
              "name":"444",
              "itemTime":"2020-12-25 13:49:57",
              "times":"2020-12-25 13:49:57"
            }],
          },

表单验证:

代码语言:javascript
复制
<el-form ref="dialogFrom"  :model="dialogFrom"  v-for="(item,index) in dialogFrom.options">
<el-form-item 
label="路由信息:"
:prop="`options[${index}].name`"            
:rules="{required: true, message: '请输入路由信息', trigger: 'blur'}">
 <el-input  v-model="item.name"></el-input>
</el-form-item>
</el-form>

注意:方法不难,主要是有些同学被卡在如何设置prop这里:

代码语言:javascript
复制
1、:prop="`options[${index}].name`"

或者

代码语言:javascript
复制
2、:prop="'options.' + index + '.name'"

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档