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();

}

}

});

}

},

相关推荐
yuanyxh1 小时前
《精通正则表达式》精华摘要
前端·javascript·正则表达式
小飞大王6661 小时前
简单实现HTML在线编辑器
前端·编辑器·html
Jimmy2 小时前
CSS 实现卡牌翻转
前端·css·html
百万蹄蹄向前冲2 小时前
大学期末考,AI定制个性化考试体验
前端·人工智能·面试
向明天乄2 小时前
在 Vue 3 项目中集成高德地图(附 Key 与安全密钥申请全流程)
前端·vue.js·安全
sunshine_程序媛2 小时前
vue3中的watch和watchEffect区别以及demo示例
前端·javascript·vue.js·vue3
电商数据girl3 小时前
【经验分享】浅谈京东商品SKU接口的技术实现原理
java·开发语言·前端·数据库·经验分享·eclipse·json
Senar3 小时前
听《富婆KTV》让我学到个新的API
前端·javascript·浏览器
烛阴4 小时前
提升Web爬虫效率的秘密武器:Puppeteer选择器全攻略
前端·javascript·爬虫
hao_wujing4 小时前
Web 连接和跟踪
服务器·前端·javascript