项目场景:
遇到多个选择下拉框校验问题,尝试普通自动校验无果。
问题描述
第一层级可以触发校验,正常~
<el-form prop='productname'>
<el-select
v-model="productMaterial.productname"
placeholder="请选择"
filterable>
</el-select>
</el-form>
第二层级无法校验,此时prop为el-form校验查询的路径,prop存在问题
<div v-for="(typeItem,typeKey) in productMaterial.attachmentTypeList">
<el-form-item :label="`附件类型${typeKey +1}`" :prop="type" >
<el-select v-model="typeItem.type" >
</el-select>
</el-form-item>
</div>
解决方案:
请教大佬后得知了一个解决方案,如下
<div v-for="(typeItem,typeKey) in productMaterial.attachmentTypeList">
<el-form-item
:label="`附件类型${typeKey +1}`"
:prop="`attachmentTypeList.${typeKey}.type`"
@blur.capture.native="onblur('productMaterial',`attachmentTypeList.${typeKey}.type`)"
:rules="rules.type">
<el-select
v-model="typeItem.type" >
</el-select>
</el-form-item>
onblur(ref,type){
this.$refs[ref].validateField(type)
},
此时,完美解决不能触发校验的问题。