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 删除。