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

}

}

});

}

},

相关推荐
ObjectX前端实验室6 分钟前
【react18原理探究实践】异步可中断 & 时间分片
前端·react.js
SoaringHeart9 分钟前
Flutter进阶:自定义一个 json 转 model 工具
前端·flutter·dart
努力打怪升级11 分钟前
Rocky Linux 8 远程管理配置指南(宿主机 VNC + KVM 虚拟机 VNC)
前端·chrome
brzhang39 分钟前
AI Agent 干不好活,不是它笨,告诉你一个残忍的现实,是你给他的工具太难用了
前端·后端·架构
brzhang44 分钟前
一文说明白为什么现在 AI Agent 都把重点放在上下文工程(context engineering)上?
前端·后端·架构
reembarkation1 小时前
自定义分页控件,只显示当前页码的前后N页
开发语言·前端·javascript
Roye_ack1 小时前
【项目实战 Day9】springboot + vue 苍穹外卖系统(用户端订单模块 + 商家端订单管理模块 完结)
java·vue.js·spring boot·后端·mybatis
gerrgwg1 小时前
React Hooks入门
前端·javascript·react.js
ObjectX前端实验室1 小时前
【react18原理探究实践】调度机制之注册任务
前端·react.js
汉字萌萌哒2 小时前
【 HTML基础知识】
前端·javascript·windows