element el-upload上传一张图片完成后隐藏上传组件，删除图片显示上传组件

记录一下element el-upload上传一张图片完成后隐藏上传组件，删除图片显示上传组件

1. template

  :class="{hideUpload:hideUploadEdit}"
  list-type="picture-card"
  ref="upload"
  :limit="1"
  :on-change="(file, fileList) => {handleChange(file, fileList, item,index)}"
  :on-success="(response, file, fileList)=>{successUpload(response, file, fileList,item)}"
  :action='uploadUrl'
  :on-exceed="handleExceed"
  :on-remove="(file, fileList)=>{removeImg(file, fileList,item)}"
  :headers="headers"
  :file-list="item.fileList"
  :before-remove="beforeRemove">
  

2. data数据

// 是否隐藏上传按钮
hideUploadEdit: false

3. methods代码方法

// el-upload改变方法
handleChange(file,filelist,item,index){

  // 大于1张隐藏
  this.hideUploadEdit = (filelist.length >= 1);
},

// el-upload删除方法
removeImg(file,filelist,item){

  // 大于1张隐藏
  this.hideUploadEdit = (filelist.length >= 1);
}

4. css代码

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