為啥前端導出不在贅述了，不然讀者也難看到這篇文章。

第一步：安裝依賴

npm install vue-json-excel

第二步：引用依賴配置

// 導出Excel文件組件
import JsonExcel from 'vue-json-excel';
Vue.component('downloadExcel', JsonExcel)

第三步：組件調用

<download-excel :data='tableData' :fields='json_fields' :name='`${tableDataType}.xlsx`'><el-button type='primary'>導出</el-button>
</download-excel>

• tableData 是將要導出的表格數據，只要能渲染el-table，就不需要進行二次處理
• tableDataType 是導出的Excel文件的文件名
• json_fields 是將要導出的表格表頭

<script>export default {data () {return {tableData :[],    // 存放用于導出excel的數據json_fields: {學號: "student_id",    //常規字段姓名: "student_name", //支持嵌套屬性專業班級: "student_majorclass",成績: "student_score",特長: "specialty",一輪筆試: "firstexam_score",一輪狀態: "first_ispass",一輪面試:"interview_score",一面狀態:"interview",二輪面試:"secondinterview_score",二面狀態:"secondinterview"}}},
</script>

json_fields也可以使用動態配置

// 動態配置導出Excel文件的表頭
exportExcelHeader() {this.json_fields = {};this.tableFilterData.forEach(e => {this.json_fields[e.label] = e.prop;});},

動態配置參考

      columnConfigs: {priceData: [// 庫存數據列配置{ label: "商品名稱", prop: "ItemName" },{ label: "規格", prop: "ItemGG" },{ label: "單價", prop: "UnitPrice" },{ label: "日環比", prop: "HBPrice" },],

tableFilterData = [{ label: '字段1', prop: 'rsName' },{ label: '字段2', prop: 'rsCode' },
]