摘月亮的小船儿

切换模式

el-upload照片墙只显示一个并且保留删除预览功能 ​

实现效果 ​

img

实现代码 ​

html
<el-upload
    v-model:file-list="fileList"
    :action="xxxxxxx"
    list-type="picture-card"
    :class="{ disabledImg: fileList.length > 0 ? true : false }"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
    :limit="1"
    :on-success="handleSuccess"
>
    <el-icon><Plus /></el-icon>
</el-upload>
<el-upload
    v-model:file-list="fileList"
    :action="xxxxxxx"
    list-type="picture-card"
    :class="{ disabledImg: fileList.length > 0 ? true : false }"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
    :limit="1"
    :on-success="handleSuccess"
>
    <el-icon><Plus /></el-icon>
</el-upload>

通过检测绑定的fileList长度来判断是否显示新的添加使用动态class来达成样式变换

css
.disabledImg {
	:deep(.el-upload--picture-card) {
		display: none;
	}
}
.disabledImg {
	:deep(.el-upload--picture-card) {
		display: none;
	}
}