el-upload在定义file插槽时删除图片（包括隐藏上传框）

不动如山_&

于 2024-08-21 08:58:29 发布

阅读量120

点赞数 5

文章标签： vue.js 前端 elementui 前端框架

本文链接：https://blog.csdn.net/qq_57923118/article/details/141360867

版权

1.上传框隐藏效果图（限制上传两张图片，上传两张图片后隐藏上传框）

<template>
    <div>
        <el-form>
            <el-upload 
              ref="uploadPicture"
              action="#" 
              list-type="picture-card"
              :class="{hide:hideVisible}"
              :on-change="handleChange"  
              :auto-upload="false">
                <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-delete" @click="handleRemove(file)">
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
        </el-form>
    </div>
</template>
<script>
export default {
    data(){
        return{
            hideVisible: false,
        }
    },
    methods: {
        handleChange(file, fileList) {
            this.hideVisible = fileList.length >= 2;  //限制上传两张图片，上传两张图片后隐藏上传框
        },
        handleRemove(file) {
            this.hideVisible= false
            this.$refs.uploadPicture.handleRemove(file)
        },
    }
}
</script>
<style>
>>> .hide .el-upload--picture-card {
  display: none;
}
</style>