elementUi upload上传达到limit后隐藏upload图标

如题所述，我们项目要求上传控件最大只允许上传3张。当数量达到的时候，自动隐藏上传按钮控件。而当点击删除之前的照片后，又重新显示上传按钮控件。

这里我们选用了饿了么的elementUi里的el-upload控件作为基础，再添加我们的需求。

主要的templete如下

而对应的style如下

.hide   {
  position: relative;
  float: left;
  padding-top: 20px;
  padding-left: 23px;
  ::v-deep {
    .el-upload--picture-card {
      display: none;
    }

    .el-upload-list__item {
      border: 0;
      border-radius: 0;
      margin:0 30px 0 0;
    }
  }
}

但是光这样子设置呢，会有些许瑕疵，因为控件本身有删除动画时长，进而使得先出现了第四个按钮，再等删除动画完成后，重新显示了三个控件。

所以，我们就必须在删除操作里，给个响应时长。

 handleRemove(file) {
      // console.log(file);
      const index = this.$refs.uploadRef.uploadFiles.findIndex(e => e.uid === file.uid);
      this.$refs.uploadRef.uploadFiles.splice(index, 1);
      setTimeout(() => {
        this.attachmentArray.splice(index,1);
      }, 1000);
      // console.log(this.attachmentArray,"attachmentArray");
    },

这样子才能完美显示/隐藏按钮。