[vue]el-upload达到上传限制隐藏上传按钮

2,590 阅读1分钟
1.上传组件   

 <el-upload
      :action="action"
      list-type="picture-card"
      :on-success="handleSuccess"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :before-upload="beforeAvatarUpload"
      :on-exceed="handleExceed"
      :accept="accept"
      :file-list="updateParams[$attrs.type]"
      :limit="limit"
      :class="{
        reached_the_limit: isReachedTheLimit
      }"
    >
      <i class="el-icon-plus"></i>
    </el-upload>

2. 定义变量

isReachedTheLimit: false

3\. 监控方法 
 watch: {
    'updateParams.externalPhotos': 'reachedTheLimit'
  },
  methods: {
    reachedTheLimit () {
      const {
        type
      } = this.$attrs
      this.isReachedTheLimit = this.limit === this.updateParams[type].length
    }
  } 

4 深度选择器进行隐藏

.reached_the_limit {   
 /deep/ .el-upload {    
 display: none;
 }
}