[JavaScript知识库]【ant design of vue】异步导出 vue-json-excel

<template> 
   <a-col :span="5" class="set-line">
          <a-button
            type="primary"
            :disabled="disabled"
            class="set-loading-btn"
            :loading="loading"
          >
            <download-excel
              :fields="exportColumns"
              type="xls"
              :data="exportmemberList"
              name="列表报表.xls"
              :before-generate="exportData"
              :before-finish="finishDownload"
            >
              导出</download-excel
            >
          </a-button>
          <span class="add-padding-left" v-if="loading"
            >正在导出请勿退出该页面...</span
          >
        </a-col>
 </template>
<script>
export default {
 name: "",
  data() {
    return {
     //导出表头
      exportColumns: {
        订单编号: {
          field: "no",
          callback: (value) => {
            return "&nbsp;" + value;
          },
        },
        完成时间: "finished_at",
      },
      exportmemberList: [],
      // 导出表总共多少页
      exportLastPage: null,
      times: 1,
      loading: false,
    }
  },
  methods:{
    
    // 导出
    async exportData() {
      // 清除之前数据
      this.loading = true;
      await this.getExportData(this.times);
      // this.exportmemberList.length = 0;
    },
    finishDownload() {
      this.exportmemberList.length = 0;
    },
    // 导出数据接口调用
    async getExportData(exportPage) {
      return await this.$http
        .post("/admin/Order?size=50&page=" + exportPage, this.params)
        .then((res) => {
          if (res.data.data.length != 0) {
            this.exportmemberList.push(...res.data.data);
          }
          if (exportPage == 1) {
            // 获得最后一页是
            this.exportLastPage = res.data.last_page;
          }
          if (this.times >= this.exportLastPage) {
            this.loading = false;
            this.times = 1;
          } else {
            this.times++;
            return this.getExportData(this.times);
          }
        });
    },
  }
}
</script>