
解决思路:
先写一个上传按钮,点击上传按钮后判断条件是否满足,满足则显示上传组件并使用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();
}
}
});
}
},