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

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

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

表单数据:

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"
            }],
          },

表单验证:

<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这里:

1、:prop="`options[${index}].name`"

或者

2、:prop="'options.' + index + '.name'"

版权声明:除特别注明外,本站所有文章均为田珊珊个人博客原创

转载请注明:出处来自田珊珊个人博客 » element-ui 对复杂对象型数组进行表单验证

点赞

发表评论

邮箱地址不会被公开。 必填项已用*标注

  1. 站元素主机说道:

    学到了 赞一个