element vue表单form下多个form-item项循环校验

发布时间 2023-09-05 11:01:33作者: 一名小学生呀

效果图:

 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: '请选择'},],
})