elelemt-ui动态表单数据校验

elelemt-ui动态表单数据校验

前言

使用el-form表单的时候，表单项是动态添加的，网上查了下资料以及查阅了element-ui官网的示例最后得以解决，所以记录一下。

需求

el-form表单中的每一项el-form-item都是通过动态添加生成的， 每三四项为一组，每次添加都为一组，每组中的表单验证都是相同的。

实现

第一种

其实实现起来并不难，只需要给每个表单项el-form-item的prop属性稍微添加一些操作就行。

具体代码如下：

template模板：

<!-- 考核配置 -->
<el-row v-for="(configure, index) in formData.sysAssessWeightConfigList" :key="configure.key">
    <!-- 考核配置 -->
    <el-col :span="12">
        <el-form-item label="参考类型"
                      :prop="`sysAssessWeightConfigList.${index}.assessWeightScope`"
                      :rules="formRules.sysAssessWeightConfigList[index].assessWeightType">
          <el-select v-model="configure.assessWeightType"
                     placeholder="请选择"
                     @change="(value) => assessWeightTypeChange(value, index)">
            <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"
              v-if="configure.assessWeightType === 1">
        <el-form-item :prop="`sysAssessWeightConfigList.${index}.assessWeightScope`"
                      :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-row>

js：

/** 表单收集的值 */
formData: {
  /** 被考核对象 */
  positionId: '',
  /** 被考核部门 */
  assessDepartmentId: '',
  /** 被考核部门配置 */
  sysAssessWeightConfigList: [
    {
      // 唯一标识
      key: +new Date(),
      /** 参考类型 */
      assessWeightType: '',
      /** 参考范围 */
      assessWeightScope: '',
      /** 参考职务或人员 */
      assessWeightObject: '',
      /** 权重 */
      assessWeightRatio: 0
    }
  ]
},
/** 表单各项验证规则 */
formRules: {
  positionId: [{ required: true, message: '请选择参被考核对象', trigger: 'change' }],
  assessDepartmentId: [{ required: true, message: '请选择参考部门', trigger: 'change' }],
  sysAssessWeightConfigList: [
    {
      assessWeightType: [{ required: true, message: '请选择参考类型', trigger: 'change' }],
      assessWeightScope: [{ required: true, message: '请选择参考范围', trigger: 'change' }],
      assessWeightObject: [{ required: true, message: '请选择参考职务', trigger: 'change' }]
    }
  ]
},

第二种

template模板：

  <!-- 考核配置 -->
  <el-row v-for="(configure, index) in formData.sysAssessWeightConfigList" :key="configure.key">
      <!-- 考核配置 -->
      <el-col :span="12">
          <el-form-item label="参考类型"
                        :prop="`sysAssessWeightConfigList.${index}.assessWeightScope`"
                        :rules="{ required: true, message: '请选择参考类型', trigger: 'change' }">
            <el-select v-model="configure.assessWeightType"
                       placeholder="请选择"
                       @change="(value) => assessWeightTypeChange(value, index)">
              <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"
                v-if="configure.assessWeightType === 1">
          <el-form-item :prop="`sysAssessWeightConfigList.${index}.assessWeightScope`"
                        :rules="{ required: true, message: '请选择参考范围', trigger: 'change' }"
                        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-row>

js：

  /** 表单收集的值 */
  formData: {
    /** 被考核对象 */
    positionId: '',
    /** 被考核部门 */
    assessDepartmentId: '',
    /** 被考核部门配置 */
    sysAssessWeightConfigList: [
      {
        // 唯一标识
        key: +new Date(),
        /** 参考类型 */
        assessWeightType: '',
        /** 参考范围 */
        assessWeightScope: '',
        /** 参考职务或人员 */
        assessWeightObject: '',
        /** 权重 */
        assessWeightRatio: 0
      }
    ]
  },

重点：

• :prop="`sysAssessWeightConfigList[${index}].assessWeightScope`"，一定要这个格式，否则表单验证会乱！这个格式代表的意思是：sysAssessWeightConfigList数组中下标为index的对象的属性assessWeightScope，我的理解是用来对应formRules中的规则的。

• :rules="formRules.sysAssessWeightConfigList[index].assessWeightScope"，使用formRules的sysAssessWeightConfigList数组中对应下标index的assessWeightScope验证规则。

注意：

• 使用v-for循环遍历时，切记绑定的 key 不要使用index，不然删减表单项的时候表单的验证会错乱，最好自己给定一个唯一的标识，我这用了时间戳 +new Date()。
• 数据必须在formData中定义的，不然表单验证会出现意外的情况。