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表格操作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。