vue+element-ui表单校验之数组多层嵌套

表单校验两层数组嵌套

<el-form ref="form" :model="form" label-position="top" label-width="80px" class="form">
        <div class="add-kids" v-for="(item, index) in form.collectKidDtoList" :key="index"> 
            <el-row v-for="(it, i) in item.collectKid" :key="i" :gutter="10">
              <el-col :span="10" class="form-kids-number">
                <el-form-item
                  :prop="'collectKidDtoList.'+index+'.collectKid.'+i+'.collectCode'"
                  :rules="rules.collectCode"
                >
                  <el-input
                    v-model="it.collectCode"
                    placeholder="请输入子件编号"
                    :disabled="pageType==='detail'"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="pageType!=='detail'?12:14" class="form-kids-name">
                <el-form-item
                  :prop="'collectKidDtoList.'+index+'.collectKid.'+i+'.collectName'"
                  :rules="rules.collectName"
                >
                  <el-input
                    v-model="it.collectName"
                    placeholder="请输入子件名称"
                    :disabled="pageType==='detail'"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
        </div>
 </el-form>

form: {
        collectKidDtoList: []
},
rules: {
        collectCode: [
          { required: true, message: '必填', trigger: 'blur' },
          {
            validator(rule, value, callback) {
              if (/^[A-Za-z0-9]+$/.test(value.trim())) {
                callback()
              } else {
                callback(new Error('请输入字母或数字'))
              }
            },
            trigger: 'blur'
          }
        ],
        collectName: [{ required: true, message: '必填', trigger: 'blur' }]
}