element-ui的form数组表单验证（循环表单验证）

基于vue2.0的element-ui的form表单验证比较简单，但是有些同学可能对于数组类型的表单验证无从下手，这里我基于一个我自己项目中的例子，展示一下怎么进行数组的表单验证。

项目截图：

image.png

上代码,为了让大家看起来比较清晰，我删掉了无关的代码：

咱们把数组验证的部分拿出来看：

上边代码最关键的地方就是：

:ref="`refForm${index}`"

因为ref不能相同，咱们取到index用来拼接不同的ref字符串。
然后在表单验证的时候就可以循环的进行获取refs并验证了,下面这俩函数大家可以直接复制一下拿去用，保证有用：

confirm(){
     //用Promise.all进行全部form表单的验证
     Promise.all([
         //非数组部分的表单
         this.validateForm("refForm"),
         //数组部分的表单，用map返回验证函数的调用
         ...this.formData.ruleList.map((item,index)=>this.validateForm(`refForm${index}`))
     ]).then(res=>{
         if(res) {
             // 全部表单验证通过
         }
     })
 },
 validateForm(refs){
      //获取到form表单的dom，如果是对象直接拿到，如果是数组，就拿第一个
      //elementui对循环的form包装成了数组
     let valiForm = this.$refs?.[refs].validate?this.$refs?.[refs]:this.$refs?.[refs][0]
     return new Promise((resolve,reject)=>{
         //在Promise里进行验证，如果通过就resolve()
         valiForm.validate(res=>{
             if(res) resolve()
             else reject()
         })
     })
 },