ElementUI在el-table基础上进行导出.xls表格操作

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

总结

以上是生活随笔为你收集整理的ElementUI在el-table基础上进行导出.xls表格操作的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。