前言

做我的项目用ElementUI组件的时候，因为有些业务需要，官网不可能有咱们我的项目中业务所有的例子阐明，所以在这里纪录了一下平时在写我的项目的时候遇到的一些问题。

一、form组件的 model 的数据类型必须是 Object

问题背景

有个这样的需要：做一个循环表单，表单的双向绑定的值应该就是一个数组，表单属性 :model 的值就须要写成 :model="类.数组" ，如果间接把数组赋给它，写成这样 :model="数组" 就会报错，如下图所示

正确示例

//数据formData: {    id: 1,    name: '湖南师范大学',    gradeList: [      {        id: 1,        name: '一年级',        classList: [          {            id: 1,            name: '01班'          },          {            id: 2,            name: '02班级'          }        ]      }    ]  }
<!-- form表单中model的值 formData 必须为 Object 类型 -->  <el-form :model="formData" ref="ruleForm" label-width="100px" class="demo-ruleForm">    <template v-for="(grade, index) in formData.gradeList">      <el-form-item label="班级名字" :prop="'gradeList.' + index + '.name'"        :rules="{required: true, message: '请输出年级',trigger: 'blur'}">        <el-input v-model="grade.name"></el-input>      </el-form-item>    </template>  </el-form>

二、循环表单中的表单验证问题

有时候有这样的需要：一个学校相干信息的输出表单外面嵌套着各个年级信息的表单（单层循环表单），一个年级外面又有多个班级信息的表单（多层嵌套表单），这个时候对外面的各个输入框做表单验证，该怎么做呢？
把prop属性外面的匹配写对就能够了，大抵是上面这个写法：
//数据formData: {    id: 1,    name: '湖南师范大学',    gradeList: [      {        id: 1,        name: '一年级',        classList: [          {            id: 1,            name: '01班'          },          {            id: 2,            name: '02班级'          }        ]      }    ]  }

1、单层循环表单

 <!-- prop是这样写 :prop="'gradeList.' + index + '.name'" -->  <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">    <template v-for="(grade, index) in formData.gradeList">      <el-form-item label="年级名字" :prop="'gradeList.' + index + '.name'"        :rules="{required: true, message: '请输出年级',trigger: 'blur'}">        <el-input v-model="grade.name"></el-input>      </el-form-item>    </template>  </el-form>

2、双层循环表单

 <!-- 第二层的 :prop 是这样写 :prop="'gradeList.' + index + '.name'" -->  <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">    <template v-for="(grade, index) in formData.gradeList">      <el-form-item label="年级名字" :prop="'gradeList.' + index + '.name'"        :rules="{required: true, message: '请输出年级',trigger: 'blur'}">        <el-input v-model="grade.name"></el-input>      </el-form-item>      <template v-for="(class, classIndex) in grade.classList">        <el-form-item label="班级名字" :prop="'gradeList.' + index + '.classList.' + classIndex + '.name'"          :rules="{required: true, message: '请输出班级',trigger: 'blur'}">          <el-input v-model="class.name"></el-input>        </el-form-item>      </template>    </template>  </el-form>

依此类推，多层循环表单也能够依照双层循环表单中 prop 属性的格局来写。

如果有遇到组件中的其余问题或者注意事项能够在评论区留言，一起分享。

未完待续...

写在最初

我是AndyHu，目前临时是一枚前端搬砖工程师。

文中如有谬误，欢送在评论区斧正，如果这篇文章帮到了你，欢送点赞和关注

让灵魂管制本人的皮囊才是真正的自在！！！