项目场景
因为上传Excel会覆盖当前表格中的内容,所以需要给用户一个提示后 确认后才能进行上传Excel的流程;
问题描述
在准备上传文件的时候,点击按钮,文件选择框直接弹出,与我们所需要的操作不符,需要在弹出之前作出判断;
原因分析
ElementUI的上传组件似乎没有一个上传窗口弹出前的方法,所以before-upload并不能作用于此,选择文件的窗口还是会弹出来,因为这个问题是以前就解决过一次,在网上也看到过,所以大脑中有这个的解决办法;
解决方案
- 首先我们需要将template中的代码给替换掉;原来我们只是upload组件,这里我们重新多写一个按钮 并且定义一个参数将上传的按钮使用v-show隐藏掉
<el-button @click="isUpload" v-show="showUpload">上传按钮</el-button>
<el-upload :http-request="xxxx" v-show="!showUpload">
<el-button ref="uploadBtn">上传按钮</el-button> <!-- 这里只做展示的 但是得定义一个ref js中有用-->
</el-upload>
- 后面js中的isUpload事件就很好写了 上传事件xxxx这里就不在写了
isUpload(){
if(dataList.length>0){
this.$confirm("上传会覆盖数据,是否上传","温馨提示",{
confirmButtonText:"确认",
cancelButtonText:"取消",
type:"warning"
}).then(()=>{
this.$refs.uploadBtn.click() //触发上传组件中的按钮点击事件
return true
}).catch(()=>{
return false
})
}else{ //因为表格中并没有数据 所以不需要询问
this.$refs.uploadBtn.click() //触发上传组件中的按钮点击事件
}
}
结语
一条路走不通,换一条路吧,
我们可以用其他方式去实现相同的效果;