首先需要再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是添加的校验规则。
网友评论