el-form对数组中对象的属性进行验证

在开发中遇到了一个问题，el-form中的表单项是动态添加的。每四个表单项为一组，于是就形成了对象数组这种结构，然后需要对数组中的对象的每个属性进行校验。

这是模板的结构：

<!-- 考核配置 -->
<el-row v-for="(configure, index) in formData.sysAssessWeightConfigList"
        :key="index">
  <!-- 考核配置 -->
  <el-col :span="12">
    <el-form-item label="参考类型"
                  :rules="formRules.sysAssessWeightConfigList[index].assessWeightType">
      <el-select v-model="configure.assessWeightType"
                 placeholder="请选择">
        <el-option v-for="item in scoreTypeList"
                   :key="item.value"
                    :label="item.label"
                   :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
  </el-col>
  <!-- 范围 -->
  <el-col :span="12">
    <el-form-item :rules="formRules.sysAssessWeightConfigList[index].assessWeightScope"
                  label="范围">
      <el-select v-model="configure.assessWeightScope"
                 placeholder="请选择">
        <el-option v-for="item in scoreScopeList"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
  </el-col>
  <!-- 参考职务 -->
  <el-col :span="12">
    <el-form-item v-if="configure.assessWeightType === 0"
                  :rules="formRules.sysAssessWeightConfigList[index].assessWeightObject"
                  label="参考职务">
      <el-select v-model="configure.assessWeightObject"
                 placeholder="请选择">
        <el-option v-for="item in positionList"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
        </el-option>
      </el-select>
     </el-form-item>
    <!-- 考核人员 -->
   <el-form-item v-else-if="configure.assessWeightType === 1"
                            :rules="formRules.sysAssessWeightConfigList[index].assessWeightObject"
                            label="参考人员">
      <el-cascader :options="DepartPersonOptions"
                   v-model="configure.assessWeightObject"
                   :props="props"
                   clearable></el-cascader>
    </el-form-item>
  </el-col>
</el-row>

表单数据结构：

/** 表单收集的值 */
formData: {
   /** 被考核部门配置 */
  departmentConf: [
    {
      /** 参考类型 */
      scoreType: '',
      /** 参考范围 */
      scoreScope: '',
      /** 参考职务 */
      assessPosition: '',
      /** 权重 */
      assessWeight: ''
    }
  ]
}
formRules: {
  departmentConf: {
    scoreType: [{ required: true, message: '请选择参考类型', trigger: 'change' }],
    scoreScope: [{ required: true, message: '请选择参考范围', trigger: 'change' }],
    assessPosition: [{ required: true, message: '请选择参考职务', trigger: 'change' }],
    assessWeight: [{ required: true, message: '请输入权重', trigger: 'change' }]
  }
},

从上图可以看出，我们只需要在模板中为数组的对象的每个属性的el-form-item添加rules属性，然后绑定formRules下面的departmentConf中的属性即可：

例如：

<el-form-item :rules="formRules.departmentConf.scoreScope">
</el-form-item>