1.点击按钮代码
<el-tooltip content="下载excel" placement="top">
<el-button
type="primary"
:plain="true"
icon="el-icon-download"
circle
:size="defaultFormItemSize"
@click="onloadExcel"
></el-button>
</el-tooltip>
<el-tooltip content="导入excel" placement="top">
<el-button
type="primary"
:plain="true"
icon="el-icon-upload2"
circle
:size="defaultFormItemSize"
@click.stop="isModalOpen = true"
></el-button>
</el-tooltip>
2.导入弹框代码
<el-dialog
title="导入"
:visible.sync="isModalOpen"
width="30%">
<el-upload class="upload-demo" name="file" :headers="getUploadHeaders"
ref="upload"
@change="$forceUpdate()"
:action="UploadUrl()"
:file-list="fileList"
:show-file-list="false"
accept=".xlsx"
:limit="1"
:before-upload="beforeUpload"
:on-success="onFileUploadSuccess">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
<span slot="footer" class="dialog-footer">
<el-button :size="defaultFormItemSize" @click="isModalOpen = false">取 消</el-button>
</span>
</el-dialog>
3.方法代码
UploadUrl () {
return this.getUploadActionUrl(Controller.uploadExcel());
},
beforeUpload (file) {
this.loadingInstance = Loading.service(
{
target: '.upload-demo',
text: '附件上传中...'
}
);
},
onFileUploadSuccess (response, file, fileList) {
this.loadingInstance.close()
if (response.success === true) {
this.$message.success('导入成功!');
this.fileList = undefined
this.$refs.upload.clearFiles();
this.isModalOpen = false
this.refreshTableList();
} else {
this.fileList = undefined
this.$refs.upload.clearFiles();
this.$message.error(response.errorMessage)
}
},
handleNodeClick (e) {
this.contractorId = e.id;
this.refreshTableList();
},
onloadExcel () {
Controller.downloadExcel(this, '', '文件名.xlsx').then(res => {
})
},
4.js接口代码
static downloadExcel (sender, params, fileName) {
return sender.download('/downloadExcel', params, fileName);
}
static uploadExcel () {
return '/uploadExcel';
}