描述
在做项目中,有时遇到一些样式问题,又不想用js来解决,比如现在这个需求,使用elementUI图片上传(Upload)只要一张图片,上传后不能再点击上传功能。
效果
当前界面
![在这里插入图片描述](https://img-blog.csdnimg.cn/476d55432a994709804fd73af953e495.png)
预期效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/9713293ecacb419e85833a9a8ac90bff.png)
解决思路
先看界面显示的代码,没有上传图片前
![在这里插入图片描述](https://img-blog.csdnimg.cn/f58cbe8417a7454d8bceeb3ad159aba2.png)
上传图片后
![在这里插入图片描述](https://img-blog.csdnimg.cn/cd4d830acaa34a19bbf9992e4f927f03.png)
可以看到上传图片后,ul中存在了子节点
解决代码
<style lang="scss" scoped>
:deep(.el-upload-list:not(:empty) + .el-upload.el-upload--picture-card) {
display: none;
}
</style>