for循环遍历的`form表单组件`rules规则校验失效问题——输入内容后依然提示必填，亲测有效——基础积累

ant-design的终极 循环遍历的form表单组件rules规则校验

明明输入了内容，但是点击表单提交时，依然提示表单校验不通过。

注意事项 1.rules为data中rules里对应属性名，如 :rules = “rules.rewardLevel” 2.循环遍历中需要设置必填项的el-form-item都要写上rules、prop 3.prop应该写成—— :prop=“‘orders.’+index+‘.rewardLevel’” 以 + 号作为分割来解释吧，第一个orders是遍历数据对应的数组名（我这里是orders，根据自己的进行更改），index为遍历的key值变量；rewardLevel为form中的orders里的属性名（即该输入框对应的属性名）； 4.另外注意el-form中要写上 :model (我这里是form，根据自己的进行更改)，绑定的是form，orders是form里的。自己写的时候对应一下哦。 5.循环遍历的数据来源必须是form中的，也就是说必须是form.orders才可以。此处的orders变量名可以更改，但是要跟prop保持统一。 正确的写法

<template>
    <a-form-model
      ref="formQsk"
      :rules="rulesQsk"
      :model="detailQsk">
      <div v-for="(itemFather, indexFather) in detailQsk.records" :key="indexFather">
         <a-form-model-item label="取水口名称" :rules="rulesQsk.qskname":prop="'records.' + indexFather + '.qskname'">
          <a-input
            size="large"
            allow-clear
            v-model.trim="itemFather.qskname"
            placeholder="请输入取水口名称"
          ></a-input>
        </a-form-model-item>
   </a-form-model>
</template>

<script>
export default {
    data() {
        return {
            detailQsk: {
                records: [
                  {
                    qskname: '',
                   },
                 {
                    qskname: '',
                   }
                ]
            },
            rulesQsk: {
                qskname: [
                  { required: true, message: '请输入取水口名称', trigger: 'blur' },
                ],
            }
        }
    }
          
 }
</script>