如何实现element-UI循环表单以及数据验证

可能看到这篇文章，你很困惑。为啥要循环表单？其实并不难理解，我们以系统设置页面为例，一般直接按照客户需要来写表单就行了。但是吧，慢慢你会发现这并不高效，因为存在很多客户，他们对自己的需求几乎是模糊不清的，系统菜单就会经常变动，这就很浪费时间。

其实我们可以做成灵活一点的，我们把设置页这里做成可以切换标签的分组，然后每个分组下面就是表单数据，然后这一切的控制都交给数据库，建立一个表来保存分组，然后再建一个表保存表单数据和表单类型等等这些数据，然后直接通过循环来取数据，如果需要改变系统设置 ，只需要修改数据表即可

首先我们需要循环数组，实现表单循环。然后我们需要在prop时使用数组名称+index+具体参数,同时rules规则需要单独配置，接着v-model需要双向绑定对应的值。最后，valueArray这个最好是一开始就有一组默认为空的数组，否则双向绑定、验证会失败，如果需要动态新增可以使用this.fromList.valueArray.push(this.$options.data.call(this).fromList.valueArray[0])

废话不多说，直接上代码：