element+vue v-for渲染多个表单验证

目前有一个需求就是：点击添加按钮创建一个表单，可以保存删除修改等一系列操作。
因为是表单所以涉及到需要表单验证。差了很多资料发现都是点击之后添加一条可输入的input框之类，并没整体循环一整个表单的。

所以研究了一下。
今儿写一个~~

当我点击保存的时候验证信息
在网上差了很多方法，但是都没有验证到数据，并且报错。目前页面上的数据都是我写死的数据。
上代码

 <div
            class="addForm"
            v-for="(item,index) in formDate"
            :key="index"
            :style="formDate[index].edit ? 'border-color:rgba(16, 124, 246, 1)':'border-color:#'"
          >
            <el-switch
              class="fr"
              v-model="item.onuse"
              active-color="#13ce66"
              @change="changeStatus($event ,index)"
            ></el-switch>
            <el-form ref="ValidateForm" :model="item" label-width="184px"  :rules="rules">
              <el-form-item label="" prop="name" style="display: inline-block" id="formName" >
                <div class="blueLine"></div>
                <el-input clearable minlength="1" maxlength="6" v-model="item.name" placeholder="输入班制" type="textarea" rows="1" resize="none" class="workStyleInput" v-if="item.edit"></el-input>
                <div class="workStyle" v-if="!item.edit" style="width: 150px;">{{item.name}}</div>
            </el-form-item>
              <el-form-item label="适用人员库：" prop="region">
                <el-select v-model="item.region">
                  <el-option label="区域一" value="1"></el-option>
                  <el-option label="区域二" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="工作日期：">
                <el-form-item prop="date1" class="fl" style="padding-top:0;">
                  <el-date-picker type="date" placeholder="选择日期" v-model="item.date1"></el-date-picker>
                </el-form-item>
                <i class="el-icon-minus fl"></i>
                <el-form-item prop="date2" class="fl" style="padding-top:0;">
                  <el-date-picker type="date" placeholder="选择日期" v-model="item.date2"></el-date-picker>
                </el-form-item>
              </el-form-item>
              <el-form-item label="工作日：" prop="type">
                <el-checkbox-group v-model="item.type" >
                  <el-checkbox label="1"  name="type" border size="medium">星期一</el-checkbox>
                  <el-checkbox label="2"  name="type" border size="medium">星期二</el-checkbox>
                  <el-checkbox label="3"  name="type" border size="medium">星期三</el-checkbox>
                  <el-checkbox label="4"  name="type" border size="medium" >星期四</el-checkbox>
                  <el-checkbox label="5"  name="type" border size="medium" >星期五</el-checkbox>
                  <el-checkbox label="6"  name="type" border size="medium">星期六</el-checkbox>
                  <el-checkbox label="7"  name="type" border size="medium">星期日</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="工作时间："  >
                <el-form-item prop="time1" class="fl" style="padding-top:0;">
                  <el-date-picker
                    type="fixed-time"
                    placeholder="选择时间"
                    v-model="item.time1"
                  ></el-date-picker>
                </el-form-item>
                <i class="el-icon-minus fl"></i>
                <el-form-item prop="date2" class="fl" style="padding-top:0;">
                  <el-time-picker
                    type="fixed-time"
                    placeholder="选择时间"
                    v-model="item.time2"
                  ></el-time-picker>
                </el-form-item>
              </el-form-item>
            </el-form>
            <div class="setBtn">
              <i class="iconfont iconbaocun" v-if="item.edit" @click="saveForm('ValidateForm',index)" style="color:#107CF6"> 保存</i>
            </div>
          </div>






 data() {
      return {
        formDate: [
          {
            index: 1,
            edit: 0, //是否修改0不修改1修改
            onuse: true,
            name: "正常上班", //考核名字
            date1: "",
            date2: "",
            region: "1", //选库
            time1: "",
            time2: "",
            type: ["1", "2", "3", "4"] //星期
          },
          {
            index: 2,
            edit: 1, //是否修改0不修改1修改
            onuse: false,
            name: "xixihah", //考核名字
            date1: "",
            date2: "",
            region: "2", //选库
            time1: "",
            time2: "",
            type: ["1", "2", "4", "5"] //星期
          }
        ],
        rules: {
          region: [
            { required: true, message: '请选择人员库', trigger: 'change' }
          ],
          name: [
            { required: true, message: '请输入考勤方案名称', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          time1: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          time2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '请至少选择一天工作时间', trigger: 'change' }
          ],
        },
      };
    },


  //表单保存
      saveForm(formName, index) {
        this.$refs[formName][index].validate((valid) => {
          if (valid) {
            console.log('验证成功！');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
        this.formDate[index].edit = 0;
      },

首先当验证时报错时先看你表单上的ref和保存时refs是否一致。

<el-form ref="ValidateForm" :model="item" label-width="184px"  :rules="rules">



this.$refs[formName][index].validate((valid) => {

其次看你保存的事件，传参是否用‘’包住。

 <i class="iconfont iconbaocun" v-if="item.edit" @click="saveForm('ValidateForm',index)" style="color:#107CF6"> 保存</i>

然后说回如果要是循环出多个表单。那么refs输出就是一个数组。
所以在验证的时候需要获取到当前表单的下标。

 <i class="iconfont iconbaocun" v-if="item.edit" @click="saveForm('ValidateForm',index)" style="color:#107CF6"> 保存</i>

 this.$refs[formName][index].validate((valid) => {

这样就解决啦~~~~

出现这个问题的原因：数组对象渲染，当用ref获取dom时，由于是多个dom，所以获取的refs也是数组的形式，需要通过下标获取对应的refs进行处理。