elementUI中动态表单的校验

首先需要再data中定义表单变量

form:{
  interview_plan_array:[],
}

循环的表单数据

<el-form :model="form" label-width="130px" ref="form" :rules="interviewRules">
  <div v-for="(item,index) in form.interview_plan_array" class="group" style="position: relative;" :key="index">
      <el-form-item :label="item.name">
        <el-select v-model="item.user_id"  size="small" filterable class="firstItem">
          <el-option v-for="(item,index) in interviewer" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
       </el-form-item >     
        <el-form-item v-model="item.position"  :prop="'interview_plan_array.'+index+'.position'" :rules="item.user_id!=='' ? interviewRules.position : []">
         <el-select v-model="item.position"  size="small" filterable >
          <el-option v-for="(item,index) in position" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
  </div>
</el-form>

表单的校验规则如下

interviewRules:{
  position:[{required: true, message: '请选择职位', trigger: 'change'}]
},

通过给每一个循环的表单数据添加对应的校验规则即可完成校验 ，其中prop是传入表单的字段，rules是添加的校验规则。

多个表单数据公用一个校验方法

<el-form-item label="同学意向反馈：" prop="invite_feedback_status" :rules="isSubmit? rules.offer_receive_status: []">    
</el-form-item>

其中rules的规则

rules: {
  offer_receive_status: [
    {required: true, message: '请选择', trigger: 'blur'}
  ]
},