Element-ui 之 form表单套数组、表单数组套数组的校验rule

 
 

rule 直接赋值到对应的 el-form-item

话不多说，直接上代码：

<!-- 上面还有代码，只摘了主要代码出来 -->
<div class="flex-item-center district-list-item" v-for="(item, index) in form.districtList" :key="index">
  <div class="form-wrap">
     <div class="flex-item-center">
       <el-form-item
         label="库区名"
         label-width="80px"
         :prop="`districtList[${index}].districtName`"
         :rules="listRules.districtName"
       >
         <el-input
           v-model="item.districtName"
           placeholder="请输入库区名"
           maxlength="10"
           @blur="districtNameBlur($event, index)"
         />
       </el-form-item>
       <el-form-item label="库区编号" :prop="`districtList[${index}].districtCode`" :rules="listRules.districtCode">
         <el-input
           v-model="item.districtCode"
           placeholder="请输入库区编号"
           maxlength="10"
           @blur="districtCodeBlur($event, index)"
         />
       </el-form-item>
       <el-button
         type="primary"
         icon="el-icon-plus"
         style="margin-left: 10px; margin-bottom: 22px"
         circle
         @click="addStorage(index)"
       ></el-button>
     </div>
     <div style="margin-left: 50px">
       <div class="box-title2" v-show="item.storageList.length > 0">新增库位</div>
       <div class="flex-item-center warehouse-list-item" v-for="(curr, idx) in item.storageList" :key="idx">
         <div class="flex-item-center">
           <el-form-item
             label="库位名"
             label-width="80px"
             :rules="listRules2.storageName"
             :prop="`districtList[${index}].storageList[${idx}].storageName`"
           >
             <el-input
               v-model="curr.storageName"
               placeholder="请输入库位名"
               maxlength="10"
               @blur="storageNameBlur($event, index, idx)"
             />
           </el-form-item>
           <el-form-item
             label="库位编号"
             :prop="`districtList[${index}].storageList[${idx}].storageCode`"
             :rules="listRules2.storageCode"
           >
             <el-input
               v-model="curr.storageCode"
               placeholder="请输入库位编号"
               maxlength="10"
               @blur="storageCodeBlur($event, index, idx)"
             />
           </el-form-item>
           <el-button
             type="warning"
             icon="el-icon-minus"
             style="margin-left: 10px; margin-bottom: 22px"
             v-show="idx != 0"
             circle
             @click="delStorage(index, idx)"
           ></el-button>
         </div>
       </div>
     </div>
   </div>
   <div class="flex-col-center" style="margin-left: 20px">
     <el-button type="primary" icon="el-icon-folder-add" style="margin-bottom: 10px" @click="addDistrict">
       增加
     </el-button>
     <el-button
       type="warning"
       v-show="index != 0"
       icon="el-icon-folder-remove"
       style="margin: 0"
       @click="delDistrict(index)"
     >
       删除
     </el-button>
   </div>
 </div>
 <!-- 下面还有代码，只摘了主要代码出来 -->

export default {
	data() {
		form: {},
		listRules: {
		 districtName: [{ required: true, message: '库区名不能为空', trigger: 'blur' }],
		  districtCode: [{ required: true, message: '库区编号不能为空', trigger: 'blur' }],
		},
		listRules2: {
		  storageName: [{ required: true, message: '库位名不能为空', trigger: 'blur' }],
		  storageCode: [{ required: true, message: '库位编号不能为空', trigger: 'blur' }],
		},
	}
}

 

亲测有效！！！

 
 

如有不足，望大家多多指点！ 谢谢！