1.截图
2.导出按钮
<el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
3.导出方法
this.downloadFile为全局挂载的方法
/** 导出按钮操作 */handleExport() {// 导出接口exportHealthSubsidy(this.ids).then((res) => {this.downloadFile(res, "文件导出.xls");})},
对应接口
4.el-table复选框操作
组件自带方法@selection-change
<el-table ref="multipleTable" v-loading="loading" :data="subsidyList" @selection-change="handleSelectionChange">
5.实现方法handleSelectionChange
// 复选框操作handleSelectionChange(selection) {this.ids = selection.map((item) => item.applyId);this.single = selection.length != 1;this.multiple = !selection.length;},
6.data中定义的参数
// 选中数组ids: [],// 非单个禁用single: true,// 非多个禁用multiple: true,
7.新建downloadFile.js文件
import { Message } from "element-ui"// 导出export function downloadFile(blob, fileName) {Message.success({message: '正在导出',type: 'success',offset: 250})if (navigator.msSaveBlob) {navigator.msSaveBlob(blob, fileName)} else {const url = window.URL.createObjectURL(new Blob([blob]))const link = document.createElement('a')link.style.display = "none"link.href = urllink.setAttribute("download", fileName)document.body.appendChild(link)link.click()URL.revokeObjectURL(link.href)document.body.removeChild(link)// Message.success({// message: '导出成功',// type: 'success',// offset: 250// })}}
8.在main.js中全局挂载
import { downloadFile } from "@/utils/downloadFile"Vue.prototype.downloadFile = downloadFile
