element vue表单form下多个form-item项循环校验
效果图:

ps:重点注意 prop 值
<el-form ref="fromRef" :model="formData" :rules="rules" label-width="100px" >
<el-row v-for="(item,index) in formData.allopatricCompany :key="index">
<el-col :span="7">
<el-form-item label="服务公司" :rules="rules.branchId" :prop="`allopatricCompany.${index}.branchId`">
<el-select
v-model="item.branchId"
clearable
filterable
>
<el-option
v-for="k in branchList"
:key="k.deptId"
:label="k.deptName"
:value="k.deptId"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="服务分院" :rules="rules.yardId" :prop="`allopatricCompany.${index}.yardId`">
<el-select
v-model="item.yardId"
clearable
filterable
:disabled="!item.branchId"
>
<el-option
v-for="k in item.optionList"
:key="k.id"
:label="k.name"
:value="k.id"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="审核人" :rules="rules.checkMan" :prop="`allopatricCompany.${index}.checkMan`">
<el-select
v-model="item.checkMan"
clearable
filterable
:disabled="!item.branchId"
>
<el-option
v-for="k in item.checkManList"
:key="k.userId"
:label="k.nickName+'【'+k.userName+'-'+k.deptName+'】'"
:value="k.userId"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
const rules = ref({ branchId:[{ required: true, message: '请选择'},], yardId:[{ required: true, message: '请选择'},], checkMan:[{ required: true, message: '请选择'},], })
浙公网安备 33010602011771号