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

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

首先给 el-upload 组件增加 class

1
2
3

<el-upload
            :class="{hide:hideUpload}"
            :on-change="handleImgChange">

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

1	hideUpload: false

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

1
2
3

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

css 部分

1
2
3

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

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

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

1
2
3

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