element-ui 对复杂对象型数组进行表单验证
1、需求场景，需要动态修改物流信息对象，并需要验证的复杂数据对象，所以我们只分析怎样验证复杂数据结构的数据，也就是上面的‘dialogFrom.options’中的对象数组。如何遍历该数组，来给每个元素添加验证呢？
表单数据：
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'"本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读