vue中el-table前端导出excel数据表格

一、el-table为正常时，导出方法如下：
在这里插入图片描述

1.添加导出按钮

        <el-button class="greenLinearbg dc"  size="small"  @click="webExportTotalExcel()" v-if="totalBillShow">导出</el-button>

2.导出方法

 // web导出汇总单excelwebExportTotalExcel(){// 获取表格数据//const tableData = this.userTotalList;const tableData = this.userTotalList.map(row => {  //创建一个新的数组，处理null值return Object.keys(row).reduce((acc, key) => {acc[key] = row[key] === null ? '' : row[key];return acc;}, {});});// 构建 Excel 文件内容let excelContent = `<html><head><meta charset="UTF-8"></head><body><table border="1">`;// 添加表头excelContent += '<tr>';for (const column of this.$refs.tableRef.columns) {if (column.property) {excelContent += `<th>${column.label}</th>`;}}excelContent += '</tr>';// 添加表格数据for (const row of tableData) {excelContent += '<tr>';for (const column of this.$refs.tableRef.columns) {if (column.property) {excelContent += `<td>${row[column.property]}</td>`;}}excelContent += '</tr>';}// 构建完整的 Excel 文件内容excelContent += '</table></body></html>';// 创建 Blob 对象const blob = new Blob([excelContent], { type: 'application/vnd.ms-excel' });// 创建链接并触发下载const link = document.createElement("a");link.href = URL.createObjectURL(blob);link.download = '汇总单.xlsx'; // 设置默认文件名link.style.display = "none";document.body.appendChild(link);link.click();window.URL.revokeObjectURL(link.href);},

二、el-table中列为循环数据时，如下图所示：
在这里插入图片描述

导出方法如下：
1.导出按钮：

<el-button class="greenLinearbg dc"  size="small"  @click="webExportHistoryExcel('','历史账单','el-table__fixed-right',0,'message')" v-if="historyBillShow">导出</el-button>

2.导出方法为：

  // web导出历史账单excelwebExportHistoryExcel(id,excelName,className,number=0){const loading = this.$loading({lock: true,text: '数据导出中',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)'});const columns = this.$refs.message.columns,outputColumns=[];for(let i=0,len=columns.length;i<len;i++){if('label' in columns[i]){if('prop' in columns[i])outputColumns.push(columns[i].prop);else if('slot' in columns[i] && columns[i].slot!='action' && columns[i].label!='操作')outputColumns.push(columns[i].slot);}}if(this.$refs.message.selectRow=='all'){request({url:'/system/nonResidentYhzd/selectYhzdTable',method:'post',data:{pageNum:1,pageSize:this.queryParams.total}}).then(response => {ExportUtils.exportExcel(id,excelName,'',className,number,this.$refs.message.selectRow,response.rows,outputColumns);loading.close();});}else{ExportUtils.exportExcel(id,excelName,'',className,number,this.$refs.message.selectRow,this.$refs.message.selectList,outputColumns);loading.close();}},