vue导出excel文件导出的表格头部加入筛选

在Vue中导出Excel文件并在表格头部加入筛选功能，可以使用第三方库xlsx-style来实现。

首先，安装xlsx-style库：

npm install xlsx-style

然后，在Vue组件中引入xlsx-style库：

import XLSX from 'xlsx-style';

接下来，定义一个方法来导出Excel文件，并在表格头部加入筛选功能：

exportExcel() {
  // 创建一个工作簿
  const wb = XLSX.utils.book_new();

  // 创建一个工作表
  const ws = XLSX.utils.json_to_sheet(this.tableData);

  // 添加筛选功能到表格头部
  const range = XLSX.utils.decode_range(ws['!ref']);
  for (let c = range.s.c; c <= range.e.c; c++) {
    const address = XLSX.utils.encode_col(c) + '1';
    ws[address].s = {
      fill: { fgColor: { rgb: 'FFFF00' } },  // 设置背景颜色为黄色
      font: { bold: true }  // 设置字体为粗体
    };
  }

  // 将工作表添加到工作簿
  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

  // 导出Excel文件
  XLSX.writeFile(wb, 'data.xlsx');
}

在上述代码中，this.tableData是要导出的表格数据，可以根据实际情况进行修改。

最后，在Vue模板中添加一个按钮来调用exportExcel方法：

<template>
  <div>
    <button @click="exportExcel">导出Excel</button>
  </div>
</template>

这样，点击按钮时就会导出一个带有筛选功能的Excel文件，并且表格头部会有黄色背景和粗体字体