element-plus表单项循环的得到的。并且一个项里面有多个子项需要校验。
数据内容循环得到。并且还可以自己增加减少。怎么给他写校验呢?
<el-form ref="ruleFormRef" :rules="rules" :model="row" >
<el-form-item :label="index>0?'':'资质及职称'" v-for="(item,index) in row!.userTitleLevelList" :key="index" prop="userTitleLevelList" class="userTitleLevelList" required> <el-form-item :prop="`userTitleLevelList[${index}][titleCode]`" :rules="rules.titleCode"> <el-select v-model="item.titleCode" placeholder="请选择资质类别" style="width:200px" clearable> <el-option :label="item1.name" :value="item1.code" v-for="item1 in qualificationsCategory" :key="item1.code"> {{ item1.name }} </el-option> </el-select> </el-form-item> <el-form-item :prop="`userTitleLevelList[${index}][titleLevelCode]`" :rules="rules.titleLevelCode"> <el-select v-model="item.titleLevelCode" placeholder="请选择职称" style="width:200px" clearable> <el-option :label="item1.name" :value="item1.code" v-for="item1 in professionalTitle" :key="item1.code"> {{ item1.name }} </el-option> </el-select> </el-form-item> <el-icon color="#35BFA8" size="20" @click="deleteQualify(index)" v-if="drawerProps.row!.userTitleLevelList.length!=1"> <Remove /> </el-icon> <el-icon color="red" size="20" @click="addQualify()" v-if="index==drawerProps.row!.userTitleLevelList.length-1"> <CirclePlus/> </el-icon> </el-form-item>
const rules = reactive({ titleCode:[{required: true, message: "请选择资质类别"}], titleLevelCode:[{required: true, message: "请选择职称" }], });const row=reactive{
userTitleLevelList:[{titleCode: '',titleLevelCode: ''}]
}
const professionalTitle= reactive([
{
"code": "L001",
"name": "初级"
},
{
"code": "L002",
"name": "中级"
},
{
"code": "L003",
"name": "副高级"
}
])const qualificationsCategory=reactive([
{
"code": "T001",
"name": "养老护理员"
},
{
"code": "T002",
"name": "护士"
}
])
//添加资质 const addQualify = () => { row!.userTitleLevelList.push({ titleCode: '', titleLevelCode: '' }) } //删除资质 const deleteQualify = (index) => { row!.userTitleLevelList.splice(index, 1); }
重点已标红。注意循环的prop要写成动态的。并且prop使用的这个userTitleLevelList是form的model:row row里面的值。