解決思路:
先寫一個上傳按鈕,點擊上傳按鈕后判斷條件是否滿足,滿足則顯示上傳組件并使用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();
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? });
? ? ? }
? ? },