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">
<el-form-item label="薪酬模式：" prop="allowanceType">
<el-select v-model="notArrangeAttend.allowanceType" placeholder="请选择薪酬模式">
<el-option v-for="(allowanceType,index) in allowanceTypeOptions" :key="index" :label="allowanceType.label"
:value="allowanceType.value" :disabled="allowanceType.disabled"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="出勤类型：" prop="attendStatus" >
<el-select v-model="notArrangeAttend.attendStatus" placeholder="请选择出勤类型" >
<el-option v-for="(attendStatus,index) in attendStatusOptions" :key="index" :label="attendStatus.label"
:value="attendStatus.value" :disabled="attendStatus.disabled"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="出勤时长：" prop="isHalfDay" >
<el-select v-model="notArrangeAttend.isHalfDay" placeholder="请选择出勤时长">
<el-option v-for="(isHalfDay,index) in isHalfDayOptions" :key="index" :label="isHalfDay.label"
:value="isHalfDay.value" :disabled="isHalfDay.disabled"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="担任角色：" prop="userType" >
<el-select v-model="notArrangeAttend.userType" placeholder="请选择担任角色">
<el-option v-for="(userType,index) in userTypeOptions" :key="index" :label="userType.label"
:value="userType.value" :disabled="userType.disabled"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-form>
</div>
</el-tab-pane>
</el-tabs>
<div slot="footer" class="dialog-footer">
<el-button type="success" @click="submitAttendList">保 存</el-button>
<el-button @click="attend.open =false">取 消</el-button>
</div>
</el-dialog>

表单对象以及规则

  // 考勤数据
attend: {
open: false,
title: "考勤管理",
// 考勤数据
arrangeAttendList:[{
id:"",
projectId:"0",
projectCode:"",
userId:"",
nickName:"",
projectId:"",
attendStatus:"",
isHalfDay:"",
attendTime:"",
userType:"",
allowanceType:"",
}],
// 空闲人员
notArrangeAttendList:[{
id:"",
projectId:"0",
projectCode:"",
userId:"",
nickName:"",
projectId:"",
attendStatus:"",
isHalfDay:"",
attendTime:"",
userType:"",
allowanceType:"",
}],
//空闲人员填写规则
attendRules:{
allowanceType: [{
required: true,
message: '请选择薪酬模式',
trigger: 'change'
}],
attendStatus: [{
required: true,
message: '请选择出勤类型',
trigger: 'change'
}],
isHalfDay: [{
required: true,
message: '请选择出勤时长',
trigger: 'change'
}],
userType: [{
required: true,
message: '请选择担任角色',
trigger: 'change'
}],
},
},

保存按钮

     // 保存考勤数据
submitAttendList(){
let isSave = true;
for (let i = 0; i < this.attend.notArrangeAttendList.length; i++) {
this.$refs.notArrangeForm[i].validate(valid => {
if (!valid) {
isSave = false;
this.$modal.msgError("请先完善空闲人员考勤信息");
return;
} 
})
}
if (isSave) {
saveAttendBatch(this.attend).then((response) => {
this.$modal.msgSuccess("保存成功");
this.handAttendList();
});
}
},