需求：表单中每一项都要做校验处理【数组表单】

效果图：

机构信息是一个数组，针对数组中的每一项绑定一个检验信息

1. 模板内容

  <el-form ref="affiliationFormRef" :model="affiliationForm" :rules="affiliationRules" label-width="auto">
          <div v-for="(affiliation, index) in affiliationForm.affiliations" :key="index" class="affiliation-group">
            <div class="affiliation-number">{{ index + 1 }}</div>

            <div class="form-row">
              <el-form-item :prop="`affiliations.${index}.institution`" :rules="affiliationRules.institution">
                <el-input v-model="affiliation.institution" placeholder="Institution*" size="large" clearable />
              </el-form-item>

              <el-form-item :prop="`affiliations.${index}.department`" :rules="affiliationRules.department">
                <el-input v-model="affiliation.department" placeholder="Department*" size="large" clearable />
              </el-form-item>
            </div>

            <div class="form-row">
              <el-form-item :prop="`affiliations.${index}.address`" :rules="affiliationRules.address">
                <el-select v-model="affiliation.address" placeholder="Address*" size="large" style="width: 100%"
                  clearable filterable>
                  <el-option :label="item.name" :value="item.name" :key="item.name" v-for="item in countryList" />
                </el-select>
              </el-form-item>
              <el-form-item :prop="`affiliations.${index}.city`" :rules="affiliationRules.city">
                <el-input v-model="affiliation.city" placeholder="City*" size="large" clearable />
              </el-form-item>
            </div>

            <div class="form-row">
              <el-form-item :prop="`affiliations.${index}.zipCode`" :rules="affiliationRules.zipCode">
                <el-select v-model="affiliation.zipCode" placeholder="Zip Code*" size="large" style="width: 100%"
                  clearable filterable>
                  <el-option :label="item.name" :value="item.name" :key="item.name" v-for="item in countryList" />
                </el-select>
              </el-form-item>
              <el-form-item :prop="`affiliations.${index}.country`" :rules="affiliationRules.country">
                <el-select v-model="affiliation.country" placeholder="Country*" size="large" style="width: 100%"
                  clearable filterable>
                  <el-option :label="item.name" :value="item.name" :key="item.name" v-for="item in countryList" />
                </el-select>
              </el-form-item>
            </div>
          </div>

          <div class="affiliation-actions">
            <el-button type="text" @click="addAffiliation" class="add-affiliation-btn">
              Add Affiliation
            </el-button>
          </div>

          <div class="form-buttons">
            <el-button @click="goToPrevStep" size="large">
              Previous
            </el-button>
            <el-button type="primary" @click="goToNextStep" size="large">
              Next Step
            </el-button>
          </div>
        </el-form>

2. prop动态绑定, affiliationRules规则设置

const affiliationRules = {
  institution: [
    { required: true, message: "请输入机构名称", trigger: "blur" },
  ],
  department: [
    { required: true, message: "请输入部门", trigger: "blur" },
  ],
  city: [
    { required: true, message: "请输入城市", trigger: "blur" },
  ],
  country: [
    { required: true, message: "请选择国家", trigger: "blur" },
  ],
  address: [
    { required: true, message: "请输入地址", trigger: "blur" },
  ],
  zipCode: [
    { required: true, message: "请输入编码", trigger: "blur" },
  ],
};

3. 表单提交

const goToNextStep = async () => {
   if (!affiliationFormRef.value) return;
    await affiliationFormRef.value.validate((valid) => {
      if (valid) {
       console.log('通过检验---')
      }
    });
};

示例2：

<div v-for="(item2, index) in dataForm.potentialAuthors">
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="Potential Author Name" :prop="`potentialAuthors.${index}.name`"
                    :rules="[{ required: true, message: 'Please input Name', trigger: 'blur' }]">
                      <el-input
                        placeholder="Please input"
                        v-model="item2.name"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6"
                    ><el-form-item label="Email" :prop="`potentialAuthors.${index}.email`"
                    :rules="[{ required: true, message: 'Please input Email', trigger: 'blur' }]">
                      <el-input
                        placeholder="Please input"
                        v-model="item2.email"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6"
                    ><el-form-item label="Affiliation" :prop="`potentialAuthors.${index}.affiliation`"
                    :rules="[{ required: true, message: 'Please input Affiliation', trigger: 'blur' }]">
                      <el-input
                        placeholder="Please input"
                        v-model="item2.affiliation"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6"
                    ><el-form-item label="Country/Region" :prop="`potentialAuthors.${index}.country`"
                    :rules="[{ required: true, message: 'Please select Country', trigger: 'change' }]">
                      <el-select
                        clearable
                        style="width: 200px"
                        filterable
                        v-model="item2.country"
                      >
                        <el-option
                          :key="index"
                          :label="item"
                          :value="item"
                          v-for="(item, index) in countries"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>