前端VUE+ElementUI导出复杂（多级表头、合并单元格）excel表格 el-table转为excel导出

在Vue项目中使用ElementUI的el-table组件并导出复杂的Excel表格（包括多级表头和合并单元格），可以使用xlsx库来实现。以下是一个简化的例子：

1. 安装xlsx库：

npm install xlsx file-saver

2. 在Vue组件中使用xlsx库导出带有多级表头和合并单元格的Excel表格：

<template>
  <div>
    <el-button @click="exportExcel">导出Excel</el-button>
    <el-table
      ref="multiHeaderTable"
      :data="tableData"
      style="width: 100%">
      <!-- 表格内容 -->
    </el-table>
  </div>
</template>
 
<script>
import XLSX from 'xlsx';
import { saveAs } from 'file-saver';
 
export default {
  data() {
    return {
      tableData: [
        // 数据源
      ],
    };
  },
  methods: {
    exportExcel() {
      // 通过select获取DOM元素，转换为工作表
      const wb = XLSX.utils.table_to_book(document.querySelector('#multiHeaderTable'));
      // 生成Excel的配置项
      const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
      try {
        // 使用Blob进行导出
        const blob = new Blob([wbout], { type: 'application/octet-stream' });
        saveAs(blob, 'export.xlsx');
      } catch (e) {
        if (typeof console !== 'undefined') console.error(e, wbout);
      }
      return wbout;
    },
  },
};
</script>

在上述代码中，exportExcel方法通过xlsx的utils.table_to_book函数将el-table转换为工作表，然后使用XLSX.write方法将工作表写入到新的文件中，并使用saveAs方法从浏览器下载这个文件。

注意：el-table中的数据应该是预先格式化好的，以便xlsx能正确地读取和导出多级表头和合并单元格。

此代码示例假设tableData已经按照需求填充了正确的数据，并且el-table组件已经在模板中正确配置。在实际应用中，你需要根据自己的数据结构和表格配置调整代码。