element-ui 上传后隐藏上传框

功能：使用element图片上传n张之后隐藏上传框

// 官网样式
<template>
  <div>
	<el-upload
	  action="https://jsonplaceholder.typicode.com/posts/"
	  list-type="picture-card"
	  :on-preview="handlePictureCardPreview"
	  :on-remove="handleRemove"
	  :on-success="handleSuccess"
	  :class="listLength===3?'hide_box':''" // 如果上传图片个数等于3就隐藏上传框
	  >
	  <i class="el-icon-plus"></i>
	</el-upload>
	<el-dialog :visible.sync="dialogVisible">
	  <img width="100%" :src="dialogImageUrl" alt="">
	</el-dialog>
  </div>
</template>
<script>
  export default {
    
    
    data() {
    
    
      return {
    
    
        dialogImageUrl: '',
        dialogVisible: false,
        listLength:0
      };
    },
    methods: {
    
    
      handleRemove(file, fileList) {
    
    
        console.log(file, fileList);
        // 删除图片把当前图片列表的length赋值给listLength
		this.listLength = fileList.length
      },
      handlePictureCardPreview(file) {
    
    
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleSuccess(response, file, fileList){
    
    
      // 图片上传成功赋值当前列表length
      this.listLength = fileList.length
      },
    }
  }
</script>
<style scoped>
// 隐藏样式  >>> 根据需要添加(如果用的脚手架样式不能覆盖)
.hide_box >>> .el-upload--picture-card{
    
    
  display: none;
}
</style>

ps: 重新添加 ||修改||删除 清空和重新赋值即可