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

 

posted on   一名小学生呀  阅读(401)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 周边上新:园子的第一款马克杯温暖上架
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

导航

统计

点击右上角即可分享
微信分享提示