Element form循环表单提交问题
该情况是在form下嵌套多个for循环类型的form
html页面
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" style="height: 60vh;overflow: auto" label-width="150px" :disabled="isReadOnly"> <el-row> <el-col :span="12"> <el-form-item label="桥梁编码/名称:" prop="bridgeId"> <el-select style="width: 100%;" v-model="dataForm.bridgeId" filterable remote reserve-keyword placeholder="桥梁编码/名称(系统自动搜索)" :disabled="dataForm.checkId!=''" :remote-method="getBridgeOptios" :loading="bridgeOptiosLoading"> <el-option v-for="item in bridgeOptions" :key="item.id" :label="item.bridgeName" :value="item.id"> </el-option> </el-select> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="巡检类型:" prop="inspectionType"> <el-select v-model="dataForm.inspectionType" placeholder="请选择" style="width: 100%;" clearable> <el-option v-for="item in inspectionTypeOptions" :key="item.code" :label="item.value" :value="item.code"> </el-option> </el-select> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="检查日期:" prop="checkDate"> <el-date-picker style="width: 100%" v-model="dataForm.checkDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"> </el-date-picker> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="检查人:" prop="recorder"> <el-input v-model="dataForm.recorder" placeholder="检查人"></el-input> </el-form-item> </el-col> </el-row> <div class="pier" v-for="(item,index) in inspectionTypeList" :key="index"> <div class="pier-head"> <div class="el-button el-button--default el-button--mini is-plain" @click="showTableChange(index)">{{item.name}}<i :class="item.showTable? 'el-icon-arrow-down' :'el-icon-arrow-right'"></i></div> <el-button class="btn-add" type="primary" size="mini" plain v-show="item.showTable" @click="addPier(index,item.type)">新增</el-button> <el-button class="btn-del" type="danger" size="mini" plain v-show="item.showTable" @click="deletePier(index)">删除</el-button> </div> <div class="pier-content" v-show="item.showTable"> <el-card class="box-card" v-bind:class="{ on:currentRow[index] == dIndex }" v-for="(ditem,dIndex) in item.tableData" :key="dIndex" @click.native="rowClick(index,dIndex)"> <el-form label-width="110px" :model="ditem" ref="monitorForm" :disabled="isReadOnly"> <el-row> <el-col :span="12"> <el-form-item label="缺损类型:" :rules="{required: true, message: '不能为空', trigger: 'blur'}" prop="defectType"> <el-select class="defect-type-select" v-model="ditem.defectType" filterable placeholder="缺损类型"> <el-option v-for="sitem in item.defectTypes" :key="sitem.code" :label="sitem.value" :value="sitem.code"> </el-option> </el-select> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="缺损描述:" :rules="{required: true, message: '不能为空', trigger: 'blur'}" prop="defectDescription"> <el-input v-model="ditem.defectDescription" placeholder="缺损描述" clearable></el-input> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="维修紧迫度:" :rules="{required: true, message: '不能为空', trigger: 'blur'}" prop="maintenanceUrgency"> <el-select style="width: 100%;" v-model="ditem.maintenanceUrgency" filterable placeholder="维修紧迫度"> <el-option v-for="sitem in item.maintenanceUrgencys" :key="sitem.code" :label="sitem.value" :value="sitem.code"> </el-option> </el-select> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="处理意见:" :rules="{required: true, message: '不能为空', trigger: 'blur'}" prop="handlingOpinions"> <el-input v-model="ditem.handlingOpinions" placeholder="处理意见" clearable></el-input> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="24"> <el-form-item> <div v-if="ditem.uploadList && ditem.uploadList.length>0" :body-style="{ padding: '0px' }" class="box-card-file" v-for="(fitem,i) in ditem.uploadList" :key="i"> <img :src="getImgUrl(fitem.src)" class="image2" @click="filePreview(fitem)"></img> <img :src="require('@/assets/icons/del.png')" class="del" @click="fileRemove(index,dIndex,i)"></img> </div> <el-upload v-if="!isReadOnly && ditem.uploadList.length < limit" list-type="picture-card" ref="upload" class="bridge-file" :show-file-list="false" action="" :data="{fIndex:index,index:dIndex}" :http-request="uploadFlile" :beforeUpload="beforeUpload" accept="image/png, image/gif, image/jpg, image/jpeg" :limit="limit"> <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="fileDialogVisible" :modal="false"> <img width="100%" :src="fileImageUrl" alt=""> </el-dialog> </el-form-item> </el-col> </el-row> </el-form> </el-card> </div> </div> </el-form>
js
// 表单提交 async dataFormSubmit () { let flg = true let num = 0 this.inspectionTypeList.forEach((item) => { num = num + item.tableData.length }) let allValidate = [this.$refs['dataForm'].validate()] for (let i = 0; i < num; i++) { allValidate.push(this.$refs['monitorForm'][i].validate()) } await Promise.all(allValidate).catch((err) => { flg = false }) if (!flg) { this.$message.error('请检查必填信息是否填写完整') return } let dalyCheckChildEntitys = [] this.inspectionTypeList.forEach((item) => { dalyCheckChildEntitys = dalyCheckChildEntitys.concat(item.tableData) }) let dataInfo = { ...this.dataForm, dalyCheckChildEntitys: dalyCheckChildEntitys, } // 图片处理 if (this.photoDelList && this.photoDelList.length > 0) { dataInfo.delImgs = this.photoDelList.join(',') } api.save(dataInfo, !this.dataForm.checkId ? 'post' : 'put').then(({ data }) => { if (data && data.code === 0) { this.$message({ message: '操作成功', type: 'success', duration: 1500, onClose: () => { this.photoAddList = [] this.photoDelList = [] this.close() this.$emit('refreshDataList') }, }) } else { this.$message.error(data.msg) } }) },