el-upload 上传图片后隐藏按钮
在 vue 使用 el-upload 组件时,需要在上传一张图片后隐藏上传按钮亲测可用,实现方式如下:<el-row v-for="(item,index) in form" :key="index"><el-upload:class="{hideUpload:form[index].img_url != ''}":limit="1"name="upload_img":file-
·
在 vue
使用 el-upload
组件时,需要在上传一张图片后隐藏上传按钮
亲测可用,实现方式如下:
<el-row v-for="(item,index) in form" :key="index">
<el-upload
:class="{hideUpload:form[index].img_url != ''}"
:limit="1"
name="upload_img"
:file-list="form[index].img_url?[{name: 'upload_img', url: form[index].img_url}]:[]"
...
></el-upload>
</el-row>
<el-upload
:class="{hideUpload:updata.img_url != ''}"
:limit="1"
name="upload_img"
:file-list="updata.img_url?[{name: 'upload_img', url: updata.img_url}]:[]"
...
></el-upload>
...
<style lang="scss" scoped>
.hideUpload /deep/ .el-upload{
display:none; /* 上传按钮隐藏 */
}
/* 修改 el-upload 组件大小 */
/deep/ .el-upload{
width: 80px;
height: 80px;
line-height: 80px;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item{
width: 80px;
height: 80px;
line-height: 80px;
}
</style>
更多推荐
已为社区贡献1条内容
所有评论(0)