element-ui循环验证表单时prop绑定方式

循环绑定 prop 以及 rules验证的相关方式

1. templete 示例

  <el-form :model="countMeDiumForm" label-width="auto" ref="countMeDiumForm" :rules="countMeDiumFormRules">
      <el-row :gutter="20" v-for="(item, index) in countMeDiumForm.info" :key="index">
             <el-col :span="8">
                 <el-form-item label="计数介质" :prop="'info.' + index + '.carrierTypeId'"
                     :rules="countMeDiumFormRules.carrierTypeId">
                     <el-select v-model="item.carrierTypeId" style="width: 100%">
                         <el-option v-for="(child, index) in countOperations" :label="child.typeName"
                             :value="child.id" :key="index"></el-option>
                     </el-select>
                 </el-form-item>
             </el-col>
         </el-row>
     </el-form>

2. script 示例

  data(){
        return {
             // 基础数据
             countMeDiumForm: {
                 info: [
                     {
                         id: 0,
                         carrierTypeId: ""
                     },
                     {
                         id: 0,
                         carrierTypeId: ""
                     }
                 ]
             },
             // 校验规则
             countMeDiumFormRules: {
                 carrierTypeId: [
                     { required: true, message: "不能为空", trigger: "blur" }
                 ]
             }
         }
       }

注意点：其实多层循环验证核心就是在el-form-item 上 的 :prop=“‘info.’ + index + ‘.carrierTypeId’”

info就是数组名，index是数组循环索引值，carrierTypeId为需要验证的字段。

同时还要在el-form-item 加上rules属性 :rules=“countMeDiumFormRules.carrierTypeId”