elementUI form表单的嵌套校验

方法一（用一个表单处理）：

html部分

<el-form ref="form" :model="formData" label-width="148px" class="" :rules="formRules">

<el-row v-for="(item,index) in formData.tableChangeList" :key="item.id">

<el-col :span="7">

<el-form-item label="客户编号：" :prop="`tableChangeList.${index}.customerNumber`" :rules="formRules.customerNumber">

<el-input v-model="item.customerNumber" size="small" placeholder="请输入" disabled />

</el-form-item>

</el-col>

<el-col :span="7">

<el-form-item label="完成时间：" :prop="`tableChangeList.${index}.workTime`" :rules="formRules.workTime">

<el-date-picker type="date" v-model="item.workTime" value-format="yyyy-MM-dd" placeholder="请选择" size="small" style="width: 100%;" :disabled="type=='view'"></el-date-picker>

</el-form-item>

</el-col>

<el-col :span="7">

<el-form-item label="受理备注：" :prop="`tableChangeList.${index}.comment`" :rules="formRules.comment">

<el-input v-model="item.comment" size="small" placeholder="请输入" :disabled="type=='view'" />

</el-form-item>

</el-col>

<el-col :span="3">

<el-form-item label=" " label-width="10px" class="isRequired" style="padding-left: 10px;">

<uplaod-file :params="{fileType:'9',nodeCode:'5'}" :fileId.sync="item.fileIds[0]" :showFileList="item.FileList" btnText="上传" :fullWidth="false" :fileSize="20"></uplaod-file>

</el-form-item>

<!-- <div style="padding: 0px 20px;line-height: 37px;" class="isRequired">

<uplaod-file style="margin-left: 10px;display: inline-block;" :params="{fileType:'9',nodeCode:'5'}" :fileId.sync="item.fileIds[0]" :showFileList="item.FileList" btnText="上传" :fullWidth="false" :fileSize="20"></uplaod-file>

</div> -->

</el-col>

</el-row>

<div class="form-bottom">

<el-button icon="iconfont icon-button bz-baocun2" type="primary" @click="onSubmit">提交</el-button>

</div>

</el-form>

js部分

formRules: {

customerNumber: [

{ required: true, message: '请输入客户编号', trigger: 'blur' },

],

workTime: [

{ required: true, message: '请选择完成时间', trigger: 'change' },

],

comment: [

{ required: true, message: '请输入受理备注', trigger: 'blur' },

],

},

方法二（用多个表单处理）：

<el-form ref="form" :model="formData" label-width="140px" :rules="formRules">
  <div class="form-card mb20">    
    <div class="pd20">
      <el-row type="flex" style="flex-wrap: wrap; flex-direction: row">
        <el-col :span="8" v-if="type!=='add'">
          <el-form-item label="报装编号：" prop="number">
            <el-input v-model="formData.number" size="small" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="申请日期：" prop="applyTime">
            <el-date-picker type="date" placeholder="选择日期" v-model="formData.applyTime" size="small" style="width: 100%;" disabled></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="营业所：" prop="abode">
            <el-select size="small" placeholder="营业所" filterable v-model="formData.abode" class="fullWidth" clearable>
              <el-option 
                v-for="item in abodeList"
                :key="item.dictValue"
                :label="item.dictText"
                :value="item.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-for="(item,index) in formData.collectivityWaterMeterInfoList" :key="index" class="table-tr">
        <el-form :ref="'waterMeter'+index" :model="item" label-width="" class="table-from width-full" :rules="meterRules">

          <el-col :span="type == 'view'? 4:4">
            <el-form-item label="" prop="projectid">
              <el-input v-model="item.projectid" size="small" placeholder="请输入" :disabled="type=='view'"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="type == 'view'? 5:4">
            <el-form-item label="" prop="caliber">
              <dict-selectkf v-model="item.caliber" :label.sync="item.caliberLabel" code="口径" defaults size="small" :placeholder="type === 'view'?'':'请选择'" class="fullWidth" :disabled="type == 'view' || (type == 'edit' && recordData.status != 0)"></dict-selectkf>
            </el-form-item>
          </el-col>
          <el-col :span="type == 'view'? 3:3">
            <el-form-item label="" prop="applyNum">
              <float-number v-model="item.applyNum" :max="99999999" :decimals="0" unit="" :min="1" placeholder="" size="small" :disabled="type == 'view' || (type == 'edit' && recordData.status != 0)"></float-number>
            </el-form-item>
          </el-col>
          <el-col :span="type == 'view'? 3:3">
            <el-form-item label="" prop="unit">
              <el-input v-model="item.unit" size="small" :disabled="type=='view'"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="type == 'view'? 3:3">
            <el-form-item label="" prop="comment">
              <el-input v-model="item.comment" size="small" :placeholder="type === 'view'?'':'请输入'" :disabled="type=='view'"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="type == 'view'? 0:2" v-if="type=='add'||(type=='edit'&&recordData.status==0)">
            <el-button type="danger" plain size="mini" @click="rowDelete(item)">删除</el-button>
          </el-col>
        </el-form>
      </el-row>
      <div style="margin-top: 10px;">
        <el-button icon="el-icon-circle-plus-outline" type="primary" @click="tableAdd" size="small" v-if="type=='add'||(type=='edit'&&recordData.status==0)">添加</el-button>
      </div>
      <el-row>
        <el-col :span="8">
          <el-form-item label="申请内容：" prop="content">
            <el-input type="textarea" v-model="formData.content" maxlength="200" :placeholder="type === 'view'?'':'请输入'" :disabled="type=='view'"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </div>
  </div>
  <div class="form-card mb20">
    <div class="card-title">
      <div class="case-icon file"></div>
      <span class="case">附件信息</span>
    </div>
    <div style="padding: 0 20px 20px;" class="">
      <el-row class="upload-p"  :gutter="20" v-if="type !== 'view'">
        <el-col :span="4">
          <uplaod-file :params="{fileType:'1',nodeCode:'1'}" :fileId.sync="fileIds[0]" :showFileList="FileList" btnText="图纸" :fullWidth="true"></uplaod-file>
        </el-col>
        <el-col :span="4">
          <uplaod-file :params="{fileType:'11',nodeCode:'1'}" :fileId.sync="fileIds[1]" :showFileList="FileList" btnText="预算" :fullWidth="true"></uplaod-file>
        </el-col>
        <el-col :span="4">
          <uplaod-file :params="{fileType:'9',nodeCode:'1'}" :fileId.sync="fileIds[2]" :showFileList="FileList" btnText="其他" :fullWidth="true"></uplaod-file>
        </el-col>
      </el-row>    
    </div>
  </div>
</el-form>

二个独立的校验变量
formRules: {
  applyTime: [
    { required: true, message: '请选择申请日期', trigger: 'change' },
  ],
  abode: [
    { required: true, message: '请选择营业所', trigger: 'change' },
  ],
  customerName: [
    { required: true, message: '请输入客户名称', trigger: 'blur' },
  ],
  customerAddres: [
    { required: true, message: '请输入客户地址', trigger: 'blur' },
  ],
  num: [
    { required: true, message: '请输入客户编号', trigger: 'blur' },
  ],
  content: [
    { required: true, message: '请选择申请内容', trigger: 'blur' },
  ]
},
meterRules: {
  projectid: [
    { required: true, message: '请输入CEA编号', trigger: 'change' },
  ],
  caliber: [
    { required: true, message: '请选择口径', trigger: 'change' },
  ],
  applyNum: [
    { required: true, message: '请输入申请数量', trigger: 'change' },
  ],
  waterMeterModel: [
    { required: true, message: '请选择型号', trigger: 'change' },
  ],
  unit: [
    { required: true, message: '请输入单位', trigger: 'change' },
  ]
},

this.$refs['form'].validate((valid) => {
  if (valid) {
    let htzj = 0
    for( let i = 0; i < this.formData.collectivityWaterMeterInfoList.length; i++ ){
          this.$refs[`waterMeter${i}`][0].validate((valid) => {
            if( !valid ){
              validator = false
            }
          })
          if( !validator ) {
            this.msgError('请完善开票信息')
            return
          } else {
            htzj = new Decimal(htzj).add(new Decimal(this.ticketList[i].chargeAmount))
          }
        }
  }
})