需求:
element中阻止上传文件弹框出现,显示自己定义的弹框出现,然后点击自定义弹框中的确认按钮,在重新打开上传文件弹框
<el-upload ref="upload" class="upload-btn" action="/pms/pms/element-tables/upload"
:before-upload="beforeUpload"
accept=".xls,.xlsx"
:show-file-list="false"
:http-request='beforeAvatarUpload'
v-show="!isUpload"> // 将上传组件中内置的button按钮先提前隐藏掉
<el-button ref="upload" class="back-to price-btn">{{ $t('uploadFile') }}</el-button>
</el-upload>
<el-button v-show="isUpload" @click="uploadBtn" class="back-to price-btn">{{ $t('uploadFile') }}</el-button> // 在外层写一个button按钮,点击此按钮触发自定义展示弹框出现
<!--upload自定义展示弹框-->
<el-dialog title="Please confirm if you want to upload the sellable indicator for the selected sales entities" :visible.sync="uploadShow" width="40%">
<ul style="font: normal normal normal 14px Lato;color: #000">
<li v-for="item in queryForm.salesEntities" :key="item"> {{ item }}</li>
</ul>
<span slot="footer" class="dialog-footer">
<el-button @click="uploadShow = false">{{ $t('cancel') }}</el-button>
<el-button type="primary" @click="uploadSure">{{ $t('confirm') }}</el-button>
</span>
</el-dialog>
data() {
isUpload: true,
},
methods: {
//打开自定义的弹框
uploadBtn(){
this.uploadShow = true;
},
// 点击自定义弹框中的确认按钮,关闭自定义弹框,并恢复上传组件的默认的文件弹框
uploadSure(){
this.uploadShow = false;
this.$refs['upload'].$refs['upload-inner'].handleClick() // 注意:ref必须和上面上传组件定义的ref一致
},
}