ant design vue 表格 Table 实现导出功能

当你搜这个问题的时候，我想你已经知道了 Ant Design Vue 的 Table 组件没有导出功能，比用 View UI 麻烦一点

话不多说 直接上可以跑的代码供大家参考使用
表格写两个，一个导出用，隐藏掉；另一个展示用。主要是 data-source 绑定的值不同

<a-table bordered :columns="columns1" :data-source="infoListExport" id="tableExport"
         rowKey="id" :pagination="false" style="display: none">
a-table>

<a-table bordered :columns="columns1" :data-source="infoList"
         rowKey="id" :pagination="false" :loading="loading">
a-table>
<a-button type="primary" @click="getInfoList('EXPORT')">导出数据a-button>

import 引入 FileSaver， XLSX
npm install --save file-saver xlsx

// 引入需要的组件 记得 npm 安装
import FileSaver from 'file-saver'
import * as XLSX from 'xlsx'

请求数据时可以通过是否有参数判断是正常查询、翻页还是全量导出
注意使用 this.$nextTick， 否则有可能 infoListExport 有值但是导出的表格是空的

async getInfoList(e) {
  this.loading = true;
  const params = {
    page_num: this.currentIndex,
  }
  if (e == 'EXPORT') {
    params.page_num = 0;
  }
  const res = await this.$api.manage.Scene(params);
  if (res && res.data && res.data.data && res.data.data.data) {
    // 供导出用
    if (e == 'EXPORT') {
      this.infoListExport = res.data.data.data;
      this.$nextTick(() => {
        this.exportDataMethod();
      })
    } else {
      this.infoList = res.data.data.data;
      this.total = res.data.data.num * 15;
    }
  } else {
    message.warning('暂无信息');
  }
  this.loading = false;
},

exportDataMethod() {
  let et = XLSX.utils.table_to_book(document.querySelector('#tableExport'));
  let etout = XLSX.write(et, {
    bookType: 'xlsx',
    bookSST: true,
    type: 'array'
  });
  try {
    FileSaver.saveAs(new Blob([etout], {
      type: 'application/octet-stream'
    }), '导出.xlsx');
  } catch (e) {
    console.log(e, etout) ;
  }
  return etout;
},