标签：dalyCheckChildEntitys form photoDelList 表单 item num let message Element

该情况是在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)
        }
      })
    },

标签：dalyCheckChildEntitys,form,photoDelList,表单,item,num,let,message,Element
来源： https://www.cnblogs.com/wjian0916/p/16227651.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。