el-form中数组嵌套对象的验证

最近在遇到的问题,在el-form里有一个嵌套对象的数组,要对数组里的对象的各个属性进行验证,直接在rules里写属性名是不行的需要在el-form的结构和eules都做一下处理,这里附上我解决问题之后写的demo代码。

这里是页面结构

el-form中有数组内嵌对象,对内嵌对象内的属性做校验

```vue
el-form-item可单独设置label-width设置后覆盖form上设置的统一的label-width

    
    
    
//这里是数组的数据,我的是可以新增的数组,一样适用这种处理
//prop绑定

这里是form数据和rules

 formData:{
                brand:'华为',
                phones:[{name:'华为mate40'type:'Mate40 5G'},
                       {{name:'华为mate30'type:'Mate30 5G'}]
            },
                rules:{
                    brand:[{required,message:'11111'}],
                    //这里是数组的rules设置
                    productGroupRules{
                    name:[{required,message:'name不为空'}],
                    type:[{required,message:'type不为空'}]
                    }
                }
        }

你可能感兴趣的:(elementui,前端)