ElementUI表单校验prop的嵌套写法

时间:2020-9-3 作者:admin

页面中的表单经常会有校验某些字段的需要,常规的写法是prop和表单的字段名一致即可,但是表单的数据格式可能会很复杂,如果 某个字段有多级嵌套,那我们该如何正确的写prop呢,下面的三种情况中,我分别介绍如何设置prop属性才能正确的校验name字段。

常规写法

这种情况我们只需要设置prop为name即可

<el-form-item prop="name">
    <el-input v-model="form.name"></el-input>
</el-form-item>

form: {
    name: '',
    sex: '',
    age: ''
}

对象嵌套写法

如果校验的字段是二级属性,那么prop从一级属性user_info开始

<el-form-item prop="user_info.name">
    <el-input v-model="form.user_info.name"></el-input>
</el-form-item>


form: {
    user_info: {
        name: '',
        sex: '',
        age: ''    
    }
}

数组嵌套写法

如果校验的字段是数据里面的某一项的某个字段,我们需要从user_info开始,然后跟上数组的索引,最后再加上需要校验的字段

<el-form-item
    v-for="(info, index) in form.user_info"
    :prop="'user_info.' + index + '.name'"
>
    <el-input v-model="info.name"></el-input>
</el-form-item>
form: {
    user_info: [
        {
            name: '',
            sex: '',
            age: ''    
        },
        {
            name: '',
            sex: '',
            age: ''    
        }
    ]
}

总结:el-form-item上的属性prop字段,必须是其父级组件el-form中绑定model字段中的一个直接子属性。比如某个字段我们可以通过this.form.user_info[0].name获取到,那么我们就需要设置prop为user_info[0].name,这样就可以添加校验规则了,其他嵌套情况也一样。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。