由于项目中,需要根据后台数据,动态渲染多个上传组件,感觉动态循环渲染组件挺有意思的,特记录一下
<snbc-image-upload-single
:canUpload="true"
:hasDelete="true"
:isReallyDelete="false"
:falseDeletion="beforDelImgList"
:ref="item.itemField"
:uploadTips="item.itemName"
:hasCountSchedule="false"
:maxUploadCount="1"
:isUseOldUpload="false"
:maxUploadSize="maxUploadSize"
:isChooseImg="isChooseImg"
@succChooseImg="watchSuccChooseImg"
v-for="item of needImgItems"
:key="item.itemField"
>
</snbc-image-upload-single>
由于循环设置ref会得到一个数组,想要得到ref实例,需要取第一个元素,此处需要特别注意
// 完成巡检
completeReplenishment() {
const imgList = [];
this.needImgItems.forEach(v => {
// [v.itemField] 对象中创建动态属性
// this.$refs[v.itemField][0] v-for 循环组件,循环设置ref会得到一个数组,取ref,取第一个
imgList.push(
{
name: v.itemName,
label: v.itemField,
value: this.$refs[v.itemField][0].imageOrgList
}
)
})
// 由于数据是后台返回的,而且是多条,此处需要循环判断,如果发现不满足条件,return出来
for(var i=0; i<imgList.length; i++) {
if (imgList[i].value.length === 0) {
uni.showToast({
title: `请上传${imgList[i].name}图片`,
icon: 'none',
});
return; /*退出循环,代码不再放下去*/
}
}
}
至此,整个功能完成