首页 > 其他分享 >el-upload在定义file插槽时删除图片(包括隐藏上传框)

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

时间:2024-08-21 08:55:48浏览次数:10  
标签:el upload 两张 隐藏 file 上传 hideVisible 图片

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>

标签:el,upload,两张,隐藏,file,上传,hideVisible,图片
From: https://blog.csdn.net/qq_57923118/article/details/141360867

相关文章

  • Elementui-Plus动态渲染图标icon
    一、在main.ts引入相关依赖:import*asElementPlusIconsVuefrom'@element-plus/icons-vue'for(const[key,component]ofObject.entries(ElementPlusIconsVue)){app.component(key,component)}二、使用component组件进行动态加载<componentclass="icons&qu......
  • Windows 上使用 PowerShell 设置防火墙规则和端口转发; Windows 上配置端口转发,将 3389
    在PowerShell中配置Windows防火墙的端口转发涉及几个步骤。首先,你需要确保你有足够的权限来进行这些操作(通常需要管理员权限)。以下是如何在PowerShell中配置端口转发的示例步骤:1. 打开PowerShell以管理员身份运行PowerShell。你可以右键点击PowerShell图标,选择“以管......
  • Windows上用Intel编译netCDF-Fortran
    1.下载并安装netCDF-Chttps://downloads.unidata.ucar.edu/netcdf/安装目录D:\software\netCDF4.9.2 2.下载netCDF-Fortran3.编译netCDF-Fortran(1)解压源代码netcdf-fortran-4.6.1.zip到D:\software\netcdf-fortran-4.6.1\source(2)打开InteloneAPIcommandpromptforIn......
  • Ros2 Moveit2 - Robot Model and Robot State
    RobotModelandRobotState 在本节中,我们将向您介绍用于在MoveIt中使用运动学的C++API。RobotModel和RobotState类RobotModel 和 RobotState 类是提供对机器人运动学访问权限的核心类。RobotModel 类包含所有链接和关节之间的关系,包括从URDF加载的关节限制属......
  • 用友crm客户关系管理help.php存在任意文件读取漏洞
    产品介绍:用友U8CRM模块是一个综合性的客户关系管理系统,旨在帮助企业从客户出发,以客户关系为管理对象,通过动态管理客户信息、获得客户知识和评判客户价值状况,来全面提升并保持企业的竞争优势及盈利能力。 Fofa语句: body="用友U8CRM"  poc GET/pub/help.php?key=Y......
  • C# read excel file via ExcelDataReader
    Install-PackageExcelDataReader usingExcelDataReader;usingSystem.Text;usingSystem.IO;namespaceConsoleApp50{internalclassProgram{staticvoidMain(string[]args){ReadExcel("aaa.xls");......
  • FileTypeUtil.java 文件格式util
    //文件格式Utilpackagecom.lgq.ai.Util;importjava.util.Arrays;publicclassFileTypeUtil{publicstaticintfileType(StringfileName){if(!StringUtil.isEmpty(fileName)){StringfileType=fileName.split("\\.")[1];......
  • vSphere5.11.3.管理特性.4.Host Profile
    hostprofiles的介绍ahostprofileisessentiallyacollectionofallthevariousconfigurationsettingsforanesxihost.thisincludessettingssuchasnicassignments,virtualswitches,storageconfiguration,dateandtime,andmore.(hostprofile收集esxi主机的......
  • 云原生时代:从 Jenkins 到 Argo Workflows,构建高效 CI Pipeline
    云原生时代:从Jenkins到ArgoWorkflows,构建高效CIPipeline阿里云云原生 6月5日 浙江阅读 9 分钟 作者:蔡靖ArgoWorkflowsArgoWorkflows [ 1] 是用于在Kubernetes上编排Job的开源的云原生工作流引擎。可以轻松自动化和管理Kubernetes......
  • 讯飞星火极速超拟人交互技术:语音端到端,8 月底开放;昆仑万维发布 AI 短剧平台 SkyReels
       开发者朋友们大家好: 这里是「RTE开发者日报」,每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享RTE(Real-TimeEngagement)领域内「有话题的新闻」、「有态度的观点」、「有意思的数据」、「有思考的文章」、「有看点的会议」,但内容仅代表编辑的个人观......