乐趣区

关于前端:ElementUI表单校验prop的嵌套写法

页面中的表单常常会有校验某些字段的须要,惯例的写法是 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,这样就能够增加校验规定了,其余嵌套状况也一样。

退出移动版