vxeTable怎么导出excel文件

---

一、代码示例

     <vxe-button
        @click="exportDataEvent"
        circle
        icon="vxe-icon-download"
     >导出</vxe-button>
    
     <vxe-table
          border
          round
          stripe
          height="auto"
          ref="tableMain"
          :export-config="{}"
          align="center"
          size="small"
          :data="consumableList"
        >
          <vxe-column
            type="seq"
            title="序号"
            fixed="left"
            width="80"
          >
          </vxe-column>
         </vxe-table>
         

二、调用导出事件

   // methods方法
    exportDataEvent() {
    
    
      this.$refs.tableMain.exportData({
    
    
        type: "xlsx",
        filename: "仪器设备" ,
        original: false,
        mode: "all",
        isHeader: true,
        download: true,
        columnFilterMethod({
     
      column }) {
    
    
          return column.field !== "operation";
        },
      });
    },

参数详解

• type: 导出的文件类型。在这个例子中，我导出为 ‘xlsx’ 格式的 Excel 文件。
• filename: 导出的文件名。
• original: 是否导出源数据。如果设置为 false，则导出的数据会和表格中显示的数据一样（例如，如果你在表格中使用了格式化函数，那么导出的数据也会被格式化）。
• mode: 导出的数据范围。如果设置为 ‘current’，则只导出当前页的数据；如果设置为 ‘all’，则导出所有数据。
• isHeader: 是否导出表头。
• download: 是否自动下载导出的文件。如果设置为 false，则 exportData 方法会返回一个 Promise，这个 Promise resolve 的值是一个包含了导出文件内容的 Blob 对象。

请注意，vxe-table 的 Excel 导出功能依赖于 xlsx 和 FileSaver 这两个库，所以在使用这个功能之前，你需要先安装这两个库

下载

npm install xlsx file-saver

引用

import 'xlsx'
import 'file-saver'

三、过滤某列数据导出

在 vxe-table 中，columnFilterMethod 方法用于在导出数据时过滤列。方法接收一个参数，这个参数是一个对象，包含了列的信息。如果这个方法返回 true，那么这一列会被导出；如果返回 false，那么这一列会被过滤掉，不会被导出。 如果你想过滤掉操作列，你可以在 columnFilterMethod 方法中检查列的 field 或 title 属性，然后根据这个属性的值来决定是否过滤这一列。例如，如果你的操作列的 field 属性是 ‘operation’。

你可以这样写：

columnFilterMethod({
     
      column }) {
    
    
  return column.field !== 'operation';
}