首先需要再data中定義表單變量
form:{
interview_plan_array:[],
}
循環(huán)的表單數(shù)據(jù)
<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>
表單的校驗規(guī)則如下
interviewRules:{
position:[{required: true, message: '請選擇職位', trigger: 'change'}]
},
通過給每一個循環(huán)的表單數(shù)據(jù)添加對應(yīng)的校驗規(guī)則即可完成校驗 ，其中prop是傳入表單的字段帐萎，rules是添加的校驗規(guī)則株旷。
多個表單數(shù)據(jù)公用一個校驗方法
<el-form-item label="同學(xué)意向反饋：" prop="invite_feedback_status" :rules="isSubmit? rules.offer_receive_status: []">
</el-form-item>
其中rules的規(guī)則
rules: {
offer_receive_status: [
{required: true, message: '請選擇', trigger: 'blur'}
]
},
