当前位置: 首页 > news >正文

el-upload 点击上传按钮前先判断条件满足再弹选择文件框

解决思路:

先写一个上传按钮,点击上传按钮后判断条件是否满足,满足则显示上传组件并使用ref来控制点击事件,隐藏自身。

注:上传成功或者上传失败时或者上传前判断条件添加不满足return将this.isShow = true

代码部分:

 <el-date-picker v-model="orderTime" type="month" format="yyyy-MM" value-format="yyyy-MM" placeholder="选择月">

      </el-date-picker>

 <el-button class="btn-def" v-if="isShow" @click="importExcel">批量导入</el-button>

<el-upload v-show="!isShow" class="upload-demo" ref="enclosureUpload" :file-list="fileList" accept=".xlsx" action :multiple="true"

        :show-file-list="false" :auto-upload="false" :on-change="handleFileChange" :limit="1" :on-exceed="handleExceed">

        <el-button type="info" class="btn-def">

          批量导入

        </el-button>

      </el-upload>

 // 批量导入

    importExcel(){

      if(!this.orderTime){

        this.$message.error("请选择月份");

        this.isShow = true

      }else{

        this.isShow = false

        this.$nextTick(() => {

          if (this.$refs.enclosureUpload) {

            // 直接找到 input 元素并触发点击事件

            const input =           this.$refs.enclosureUpload.$el.querySelector('input[type="file"]');

            if (input) {

              input.click();

            }

          }

        });

      }

    },

http://www.lryc.cn/news/571565.html

相关文章:

  • Python 构建壳来启动加密的 SpringBoot Jar 包,增加反编译难度
  • 亚远景-ASPICE与ISO 26262:理解汽车软件质量保障的双标体系
  • 小米汽车5月交付量超过28000台,与上月持平
  • STM32 GPIO 寄存器开发
  • Linux设备框架:kset与kobject基本介绍
  • Dify动手实战教程(入门-猜病、哄哄模拟器)
  • 树结构的实际应用之堆排序
  • 【redis】安装与使用
  • 【开源解析】基于Python+Qt打造智能应用时长统计工具 - 你的数字生活分析师
  • web和uniapp接入腾讯云直播
  • 胰腺癌耐药机制新发现:超级增强子如何调控吉西他滨敏感性
  • 【Linux】基于单例模式的线程池设计
  • 构建智能问答系统:从零开始实现 RAG 应用
  • MySQL常用函数详解之流程函数
  • 逆向入门(12)程序逆向篇-Acid burn
  • Docker Compose部署Spring Cloud 微服务系统
  • CppCon 2016 学习:On using singletons in C++
  • 14.2 《3小时从零搭建企业级LLaMA3语言助手:GitHub配置+私有化模型集成全实战》
  • Uniapp性能优化全面指南:从原理到实践
  • 从0开始学习R语言--Day26--因果推断
  • 4. 时间序列预测的自回归和自动方法
  • Docker学习笔记:数据卷
  • 秋招是开发算法一起准备,还是只准备一个
  • 【CUDA编程】OptionalCUDAGuard详解
  • 【6G技术探索】MCP协议整理分享
  • 6.IK分词器拓展词库
  • # 我使用过的 HTML + CSS 实践总结笔记(含说明)
  • 设计模式笔记_创建型_工厂模式
  • 九日集训第六天
  • 【AI News | 20250617】每日AI进展