這里記錄一下，今天寫項目時 的一個需求，就是通過復選框選中指定行然后導出表格中選中行的Excel表格

然后這里介紹一個工具箱(模板)：vue-element-admin

將它拉取后，運行就可以看到如下界面：

這里面的很多功能都已經實現了，比如上圖我標記的導出Excel、Zip、PDF等。。。

然后這里我們實現的是導出Excel，我們拷貝所要實現功能的代碼、文件。?

拷貝這兩個方法到你的項目中需要導出Excel的組件中，將handleDownload方法綁定到導出按鈕上

拷貝這個js文件到你的項目中?

然后需要安裝這兩個依賴

npm install?xlsx@0.14.1

npm install?file-saver@2.0.1

通過了解，xlsx和file-saver是通過將JSON數據轉為Excel。那這個就好說了！！！

?這里解釋一下：

可以去Element官方文檔查看多選表格：?組件 | Element

：key 很重要！！！ 本人踩的坑

如果你的項目表格中，沒有刪除功能、修改功能的話，那就可以不寫它(：key)！！！

因為設置reserve-selection為true：在數據更新之后保留之前選中的數據。如果你的項目需求只是要求當前頁導出的話，那可以不設置它！

如果需求是：后端是一頁一頁的返回數據。當選中第一頁的某些行，點擊第二頁再選中第二頁的行，最后點擊按鈕將第一頁和第二頁選中的行都導出！這樣的話就必須設置這個屬性為true。將它設置為true之后表格中又有刪除、修改操作，就必須為表格寫上：key，然后在修改、刪除方法內更新這個值，否則你先選中某行，然后對該行進行了修改操作，此時你導出Excel它的數據還是你修改前的數據。你先選中一些行，然后刪除這些行中的其中一行，此時你導出Excel它的數據還是會保留已經刪除的數據

val就是你當前選中行的數據

handleDownload() {// console.log(this.list)this.downloadLoading = trueimport('@/vendor/Export2Excel').then(excel => {const tHeader = ['編號', '姓名', '性別', '聯系電話', '在校教齡(單位：年)', '職位']const filterVal = ['teaId', 'teaName', 'teaSex', 'teaPhone', 'seniority', 'teaType']const list = this.listconst data = this.formatJson(filterVal, list)// console.log(data)excel.export_json_to_excel({header: tHeader,data,filename: this.filename,autoWidth: this.autoWidth,bookType: this.bookType})this.downloadLoading = false})},formatJson(filterVal, jsonData) {return jsonData.map(v => filterVal.map(j => {if (j === 'teaSex') {if (v[j]) {return '女'}return '男'}if (j === 'teaType') {if (v[j]) {return '教員'}return '班主任'}return v[j]}))}

這里我的代碼，由于性別和類型是Boolean類型所以加了一個if判斷。

tHeader就是你導出去的列名稱，filterVal就是你要導出的列名

效果

如有幫助到你，請點一個關注。相互學習！！！?