Element-UI Uploader上传达到限制数量后隐藏上传按钮

在项目中使用到了 Element UI 的 Uploader 上传多个图片组件。需求是达到上传文件上限后 ， 将组件的添加图片按钮隐藏。

效果图：

隐藏后：

首先给 el-upload 组件增加 class

<el-upload
       :class="{ hide: hideUpload }"
        action="#"
        list-type="picture-card"
        :file-list="fileList"
        :limit="limitCount"
        :on-change="ChangeImage"               
>

然后 data 里面设定一个初始状态值

hideUpload: false

再在组件中绑定一个 on-change 事件 , ChangeImage

ChangeImage(file, fileList) {
    this.hideUpload = fileList.length >= this.limitCount;
}

最后css部分

.hide .el-upload--picture-card {
	display: none;
}

** 注意 , Vue 中需要将 style 中的 scoped去掉方可生效 , 或者增加层级前缀

::v-deep .hide .el-upload--picture-card {
		display: none;
}

这样就可以实现上传按钮的显示隐藏了