关于前端: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，这样就能够增加校验规定了，其余嵌套状况也一样。