Element-UI 上传图片到达一定数量后隐藏图片上传按钮

在项目中使用了element的el-upload上传图片组件，需求是上传一张图片而已，但是发现上传完以后一张图片后在旁边再生成一个上传图片的按钮

就像这样，实在是接受不了，并且需求是上传之后没有这个上传按钮，删除图片之后再出现。

首先我通过浏览器找到了这个上传图片按钮的class名称为 .el-upload–picture-card 我知道不可以直接修改，所以决定给这个组件绑定一个class名

:class="{hide:hideUpload}"

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

hideUpload: false

在el-upload中绑定一个on-change事件，这个事件有两个参数（file，fileList）并且在添加文件、上传成功和上传失败时都会被调用：

this.hideUpload = fileList.length >= this.limitCount;

当上传图片的数量大于或等于你所限制的上传图片数量时（也就是组件中绑定的limit），hideUpload 为true则像组件添加一个名为hide的class名

在el-upload中绑定一个on-remove事件，这个事件在删除图片时调用

this.hideUpload = fileList.length >= this.limitCount;

同样的一行代码，不过这时hideUpload为false

css代码

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

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

注意：在vue中的话，需要将style中的scope去掉！