# 前言做项目用ElementUI组件的时候，因为有些业务需求，官方不可能有我们项目中业务所有的例子说明，所以在这里纪录了一下平常在写项目的时候遇到的一些问题。 ## 一、form组件的 `model` 的数据类型必须是 `Object` ### 问题背景 >有个这样的需求：做一个循环表单，表单的双向绑定的值应该就是一个数组，表单属性 :model 的值就需要写成 **:model="类.数组"** ，如果直接把数组赋给它，写成这样 **:model="数组"** 就会报错，如下图所示 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8558ba869d2a466390aa2100b26b611d~tplv-k3u1fbpfcp-watermark.image) ### 正确示例 ```JavaScript //数据 formData: { id: 1, name: '湖南师范大学', gradeList: [ { id: 1, name: '一年级', classList: [ { id: 1, name: '01班' }, { id: 2, name: '02班级' } ] } ] } ``` ```html ``` ## 二、循环表单中的表单验证问题 > 有时候有这样的需求：一个学校相关信息的输入表单里面嵌套着各个年级信息的表单（单层循环表单），一个年级里面又有多个班级信息的表单（多层嵌套表单），这个时候对里面的各个输入框做表单验证，该怎么做呢？把prop属性里面的匹配写对就可以了，大致是下面这个写法： ```JavaScript //数据 formData: { id: 1, name: '湖南师范大学', gradeList: [ { id: 1, name: '一年级', classList: [ { id: 1, name: '01班' }, { id: 2, name: '02班级' } ] } ] } ``` ### 1、单层循环表单 ```html ``` ### 2、双层循环表单 ```html ``` **依此类推，多层循环表单也可以按照双层循环表单中 prop 属性的格式来写。** 如果有遇到组件中的其他问题或者注意事项可以在评论区留言，一起分享。未完待续... ## 写在最后我是**AndyHu**，目前暂时是一枚前端搬砖工程师。文中如有错误，欢迎在评论区指正，如果这篇文章帮到了你，欢迎点赞和关注 **让灵魂控制自己的皮囊才是真正的自由！！！**