vue针对动态生成的表单el-form进行提交校验

需求

需要对所有空闲人员的考勤信息进行管理。
1、后台得到所有的空闲人员名单数组
2、前端将得到的各个空闲人员的薪酬方式、出勤类型等进行填写
3、对指定填写内容进行必填项校验
4、当每个对象校验通过时，予以提交保存

效果

代码

表单代码

<!-- 考勤数据 -->
    <el-dialog class="global-dialog" :title="attend.title" :visible.sync="attend.open" width="1400px" append-to-body>
          <el-tabs type="border-card">
            <el-tab-pane label="空闲人员">
              <div v-for="(notArrangeAttend,notArrangeAttendIndex) in attend.notArrangeAttendList" :key="notArrangeAttendIndex">
                <el-form ref="notArrangeForm" :model="notArrangeAttend" :rules="attend.attendRules" size="medium" label-width="100px" height="200px">
                    <el-col :span="4">
                      <el-form-item label="成员：" prop="nickName">
                        {
  { notArrangeAttend.nickName }} 
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item label="出发时间：" prop="attendTime">
                        {
  { notArrangeAttend.attendTime }}
                      </el-form-item>
                    </el-col>
                    <el-col :span="4"<