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

}

}

});

}

},

相关推荐
孟祥_成都2 分钟前
Prompt 还能哄女朋友!你真的知道如何问 ai 问题吗?
前端·人工智能
前端涂涂3 分钟前
第3讲:BTC-数据结构
前端
白狐_79815 分钟前
【项目实战】我用一个 HTML 文件写了一个“CET-6 单词斩”
前端·算法·html
夕水18 分钟前
React Server Components 中的严重安全漏洞
前端
sg_knight20 分钟前
SSE 技术实现前后端实时数据同步
java·前端·spring boot·spring·web·sse·数据同步
苹果电脑的鑫鑫27 分钟前
el-select下拉菜单如何可以手输入内容
前端·vue.js·elementui
克喵的水银蛇34 分钟前
Flutter 弹性布局实战:快速掌握 Row/Column/Flex 核心用法
开发语言·javascript·flutter
脾气有点小暴38 分钟前
ES6(ECMAScript 2015)基本语法全解析
前端·javascript
前端fighter38 分钟前
全栈项目:闲置二手交易系统(二)
前端·vue.js·node.js
sztian6840 分钟前
JavaScript---BOM对象、JS执行机制、location对象
开发语言·前端·javascript