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.pswp.cn/bicheng/85462.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/85462.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/85462.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

django ReturnDict 如何修改內容

在Django中&#xff0c;QuerySet 對象通常用于從數據庫中檢索數據&#xff0c;并且可以被轉換為各種格式&#xff0c;例如字典。如果你想修改QuerySet返回的結果&#xff08;例如&#xff0c;將其轉換為dict&#xff09;&#xff0c;你可以在查詢執行后進行操作。這里有幾種常見…

密室出逃消消樂小游戲微信流量主小程序開源

這個密室出逃消消樂小游戲采用了微信小程序的標準目錄結構&#xff0c;包含以下核心功能&#xff1a; 游戲界面&#xff1a;6x6 的網格布局&#xff0c;隨機生成不同類型的物品 游戲邏輯&#xff1a;交換相鄰物品&#xff0c;消除三個或以上相同類型的物品 計分系統&#xff1a…

SmartMediaKit實戰經驗總結之高穩定、低延遲、強兼容

在萬物互聯與數字化加速融合的今天&#xff0c;音視頻實時通信技術正成為各行業發展的核心驅動力。從教育到工業、從安防到遠程醫療&#xff0c;毫秒級低延遲的音視頻交互體驗已成為新一代實時系統的“生命線”。而在這個領域&#xff0c;視沃科技旗下的大牛直播SDK&#xff08…

前端性能調優工具與指標

性能指標解析 核心Web指標 核心Web指標(Core Web Vitals)是Google定義的一組關鍵性能指標&#xff0c;直接影響用戶體驗和SEO排名&#xff1a; FCP (First Contentful Paint): 首次內容繪制&#xff0c;記錄頁面首次渲染任何文本、圖像、非白色畫布或SVG的時間點 優: < 1.…

LeeCode2294劃分數組使最大值為K

項目場景&#xff1a; 給你一個整數數組 nums 和一個整數 k 。你可以將 nums 劃分成一個或多個 子序列 &#xff0c;使 nums 中的每個元素都 恰好 出現在一個子序列中。 在滿足每個子序列中最大值和最小值之間的差值最多為 k 的前提下&#xff0c;返回需要劃分的 最少 子序列…

中國醫科大借iMeta影響因子躍升至33.2(中科院1區)東風,憑多組學聯合生信分析成果登刊

中國醫科大借iMeta影響因子躍升至33.2&#xff08;中科院1區&#xff09;東風&#xff0c;憑多組學聯合生信分析成果登刊 2025年6月18日&#xff0c;科睿唯安正式發布了2024年期刊的最新影響因子(發送關鍵詞 “2024JIF” 至 “生信學術縱覽”&#xff0c;即可下載完整版最新影…

百度垂搜數據管理系統彈性調度優化實踐

百度垂直搜索系統將搜索核心能力賦能阿拉丁&#xff08;百度搜索特型結果&#xff09;、垂直領域搜索、應用內搜索等場景&#xff0c;支撐了數百個檢索場景、百億級內容數據的檢索。隨著接入業務數量和數據量不斷增長&#xff0c;系統在海量數據管理與調度上遭遇新的挑戰&#…

什么是Nacos?

Nacos&#xff08;Naming and Configuration Service&#xff09;是一個由阿里巴巴開源的動態服務發現、配置管理和服務管理平臺&#xff0c;專為云原生應用設計。它是構建微服務架構的核心基礎設施之一&#xff0c;主要解決分布式系統中的服務注冊發現和動態配置管理兩大核心問…

golang excel導出時需要顯示刷新

"github.com/xuri/excelize/v2"包導出excel文件時在調用WriteTo函數前需要顯式關閉流寫入器 if err : sw.Flush(); err ! nil { return nil, err } &#xff0c;否則會造成excel文件使用excel打開時出現問題&#xff0c;但是用wps打開文件就沒有此問題 詳細代碼&…

Make RL Great Again:大語言模型時代的強化學習推理丨記深度推理模型論壇

進入2025年&#xff0c;大模型依賴Scaling Law提升性能的方式正面臨邊際遞減。一方面算力成本居高不下&#xff0c;另一方面訓練效率與推理質量難以兼顧。在這種背景下&#xff0c;模型正悄然從“模仿機器”轉向“思考引擎”。 6月7日&#xff0c;以“推理”為核心的智源大會深…

MATLAB R2025a安裝教程

軟件介紹 MATLAB 是由MathWorks公司開發的高級數值計算軟件&#xff0c;在工程計算、數據分析和算法開發領域應用廣泛&#xff0c;以下是其相關介紹&#xff1a; 功能特點 ?矩陣運算與可視化&#xff1a;提供強大的矩陣處理能力&#xff0c;內置豐富的繪圖函數&#xff0c;可快…

Flink CDC MySQL 表字段定義為 decimal 輸出亂碼問題優雅解決方式

Flink CDC MySQL 表字段定義為 decimal 輸出亂碼問題解析 代碼運行環境 Flink 1.15 + FlinkCDC 2.4.0 + jdk1.8 +springboot 2.31、原因分析 Flink CDC 底層使用 Debezium 連接器來捕獲 MySQL 的數據變更。當 MySQL 表中的字段類型為 decimal 時,Debezium 默認會將 decimal…

spring-webmvc @ResponseStatus 典型用法

典型用法 為某個接口指定固定的 HTTP 狀態碼&#xff08;如創建成功返回 201&#xff09; 當該方法執行成功時&#xff0c;HTTP 響應狀態碼會是 201 Created。 適用于不需要動態控制狀態碼的場景。 PostMapping("/users") ResponseStatus(HttpStatus.CREATED) pub…

鴻蒙Next倉頡語言開發實戰教程:設置頁面

倉頡語言商城應用的頁面開發教程接近尾聲了&#xff0c;今天要分享的是設置頁面&#xff1a; 導航欄還是老樣式&#xff0c;介紹過很多次了&#xff0c;今天不再贅述。這個頁面的內容主要還是介紹List容器的使用。 可以看出列表內容分為三組&#xff0c;所以我們要用到ListIte…

Redis 第三講 --- 指令篇 通用命令(一)

前言&#xff1a; 在《Redis 第二講》中&#xff0c;我們完成了 Redis 的安裝與環境配置&#xff0c;為實際操作奠定了基礎。本講將正式進入 Redis 的核心領域——指令操作。我們將從最基礎的鍵值操作開始&#xff0c;逐步掌握數據讀寫、鍵管理及生產環境注意事項&#xff0c;…

數字媒體專業課程介紹以及就業方向

專業課程體系融合藝術創作與技術實踐,旨在培養兼具美學素養和產業應用能力的復合型人才。以下是核心課程模塊及代表性課程,涵蓋從基礎到高階的全流程訓練: ?? 一、核心課程體系 藝術基礎課程 繪畫訓練:素描、速寫、色彩理論、構成藝術,培養造型能力與色彩運用2610。 動…

Spring-創建第一個SpringBoot項目

目錄 一.使用IDEA創建 1.專業版 2.社區版 二.使用網頁創建項目 三.項目目錄介紹 一.使用IDEA創建 1.專業版 修改Server URL為https://start.aliyun.com 2.社區版 這里需要注意對應的IDEA版本&#xff0c;版本不對導入無法使用。 不需要解壓&#xff0…

【數據分析三:Data Storage】數據存儲

數據真是越來越多啊 正文開始 一、數據 結構化數據 可以使用關系型數據庫表示和存儲的數據&#xff0c;擁有固定結構 半結構化數據 弱結構化&#xff0c;雖然不符合關系型數據模型的要求&#xff0c;但是含有相關的標記(自描述結構)&#xff0c;分割實體及其屬性 。如&#xf…

Spring Boot 整合 Spring AI 與 MCP 開發智能體工具指南

Spring Boot 整合 Spring AI 與 MCP 開發智能體工具指南 一、引言 隨著大語言模型(LLM)的普及&#xff0c;越來越多的開發者希望將其集成到自己的應用中。Spring AI 作為 Spring 生態下的 AI 集成框架&#xff0c;提供了便捷的方式來對接各種大模型。而 MCP(Model Context Pr…

【開源項目】GraphRAG Agent:可解釋、可推理的下一代智能問答系統

GraphRAG Agent&#xff1a;可解釋、可推理的下一代智能問答系統 ??引言?? 傳統 RAG&#xff08;檢索增強生成&#xff09;系統常因“黑盒推理”和上下文斷裂被詬病。微軟開源的 GraphRAG 框架嘗試用知識圖譜解決這一問題&#xff0c;而??Graph RAG Agent??&#xff0…