Vue element-ui el-upload 上传组件picture-card照片墙上传一张或者多张之后隐藏加号

项目需求如下：想利用picture-card提供的放大下载和删除功能，并且在上传一张或者多张之后禁止上传（即隐藏后面的加号按钮）

代码如下：

html:

<!--增加on-change和on-remove的钩子,el-upload里面绑定一个占位class：-->
   
 <el-upload
      action="#"
      list-type="picture-card"
      :auto-upload="false"
      :class="{hide:hideUpload}"
      :on-change="handleChange"
      :on-remove="handleRemove">
      <i slot="default" class="el-icon-plus"></i>
      <div slot="file" slot-scope="{file}">
      <img
        class="el-upload-list__item-thumbnail"
        :src="file.url" alt=""
      >
      <span class="el-upload-list__item-actions">
        <span
          class="el-upload-list__item-preview"
          @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleDownload(file)"
        >
          <i class="el-icon-download"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="fileRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
    </div>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
 

 js:

export default {
    data() {
      return {
        //初始值：hideUpload: false,
        hideUpload: false,
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false
      };
    },
    methods: {
     //onChange 对应的处理函数（添加文件、上传成功和上传失败时都会被调用的那个）：
      handleChange(file,fileList){
        // >=我们想要限制的数量，可以使任意值
        this.hideUpload = fileList.length >= 1;
      }
     //on-remove对应的处理函数（删除文件被调用的那个）
      handleRemove(file,fileList) {
        console.log(file);
        this.hideUpload = fileList.length >= 1;
      },
    
      fileRemove(file) {
        console.log(file);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleDownload(file) {
        console.log(file);
      },   
      
    }
  }

css:

<!-- >>>样式穿透，如果使用的是sass、less等预处理器则可以使用/deep/或者::v-deep，建议使用第二种方式,/deep/在某些时候会报错,::v-deep更保险并且编译速度更快.-->

<style scoped >
  >>> .hide .el-upload--picture-card {
    display: none;
}
</style>