vue中的iviewUI导出1W条列表数据每次只导出2000条的逻辑

导出弹窗的html

<template>
  <Modal v-model="exportModal" width=400 :closable="false" :mask-closable="false">
    <p slot="header" style="color:#000;text-align:left">
      <span>数据导出</span>
    </p>
    <div style="text-align:center;height:150px;color:#2d8cf0;line-height: 50px;">
      <!--<Icon type="load-c" size=28 class="demo-spin-icon-load"></Icon>-->
      <div style="font-size:18px;margin-top:20px;">数据正在导出，请稍等...</div>
      <Progress :percent="percent" />
    </div>
    <div slot="footer">
      <Button type="primary" size="large" long @click="$emit('cancelExportData')"><Icon type="ios-download-outline" style="margin-right:5px;"></Icon>取消导出</Button>
    </div>
  </Modal>
</template>

<script>
  export default {
    name: "my-export",
    props: ["exportModal", "percent"],
  }
</script>

<style scoped>

</style>

导出的js公共逻辑

/**
 * 导出公共方法  以上参数必传
 * that       当前页面的this
 * name       table表格声明的表格名称，ref
 * filename   当前页面的名称
 * columns    当前页面表格的title  当没有分页也时，可以不传
 * data       当前页面表格的数据   当没有分页也时，可以不传
 *
 * */

export function exportDataTable(that,name,filename,columns,data) {
  setTimeout(function(){
    that.$refs[name].exportCsv({
      filename: filename,
      columns: columns,
      data: data,
    });
    that.exportModal = false;
    that.dataTotal = [];
    that.percent = 0;
  },1000);
}

/**
 * 导出请求的公共方法  以上参数必传
 * that             当前页面的this
 * num              table表格数据的页码数
 * param            请求的传参
 * url              当前请求的变量名
 * table            name, filename, columns ,formData 组成的对象
 * table.name       table表格声明的表格名称，ref
 * table.columns    当前页面表格的title
 * table.filename   当前页面的名称
 * table.formData   特殊处理的文字，需把英文的逗号转换成中文的
 * counts           总页码
 *
 * */
export function getDataTotal(that, num, param, url, table, counts) {
  let params = JSON.parse(JSON.stringify(param));
  params.page = num;
  params.per_page = '1000';
  if (that.exportModal && num < global.EXPORT_20_PAGE + 1) {
    let page = counts > global.EXPORT_20_PAGE * 1000 ? global.EXPORT_20_PAGE * 1000 : counts;
    url(params)
      .then(data => {
        let list = [];
        if (data.list) {
          list = data.list;
        } else {
          list = data.data;
        }
        if (table.formData.length) {
          table.formData.forEach(ele => {
            list = transformData(list, ele)
          });
        }
        that.dataTotal = that.dataTotal.concat(list);
        that.percent = (that.dataTotal.length / page).toFixed(2) * 100;
        if (list.length === 1000 && num < global.EXPORT_20_PAGE) {
          num++;
          getDataTotal(that, num, param, url, table, counts)
        } else {
          exportDataTable(that, table.name, table.filename, table.columns, that.dataTotal);
        }
      })
      .catch(err => {
        that.$Message.error(err);
      });
  } else {
    that.dataTotal = [];
    that.percent = 0;
  }
}

/**
 *  把表格中英文的逗号转换成中文的逗号
 * */

export function transformData(data, title) {

  data.forEach(ele => {
    if (title) {
      if (ele[title]) {
        ele[title] = ele[title].replace(/,/g, '，').replace(/\s|\xA0/g,"")
      }
    } else {
      for (let key in ele) {
        if (ele[key]) {
          ele[key] = ele[key].replace(/,/g, '，').replace(/\s|\xA0/g, "")
        }
      }
    }
  })
  return data
}

导出方法的使用

<Button type="primary" class="fr" @click="exportData(1)">
          <Icon type="ios-download-outline"></Icon>
          导出
        </Button>

<script>
    export default {
        methods: {
            //导出方法
      exportData(num) {
        this.exportModal = true;
        let url, columns = [], table = [], param = {};
        param = {
              city: gm.city,
              campus: gm.campus,
              min_ymd: this.param.min_ymd,
              max_ymd: this.param.max_ymd,
              student_name: this.param.student_name,
              source_from: this.param.source_from ? this.param.source_from : 0,
              type: 1,
            };
            columns = [
              {
                title: '校区',
                key: 'f_campus'
              },
              {
                title: '收款日期',
                key: 'f_ymd'
              },
              {
                title: '学生姓名',
                key: 'student_name'
              },
              {
                title: '年级',
                key: 'f_grade'
              },
              {
                title: '收款金额',
                key: 'nbf_prepay_total'
              },
              {
                title: '收款类型',
                key: 'f_tuifei_flag'
              },
              {
                title: '资源来源',
                key: 'f_source_from'
              },
              {
                title: '收款人 ',
                key: 'f_cuid'
              },
              {
                title: '核录 ',
                key: 'f_cuid'
              },
              {
                title: '核录时间 ',
                key: 'f_ctime',
                width: 140,
              },
              {
                title: '是否合单',
                key: 'f_is_hedan'
              },
              {
                title: '合单信息 ',
                key: 'hd'
              },
            ];
            table = {
              name: 'table1',//表格的ref
              filename: '新签明细',//列表名称
              columns: columns,//列表的title
              formData: ['hd'],//字段中是否有英文逗号
            };
            url = yejiDetail;

        this.$getDataTotal(this, num, param, url, table, this.counts);
      },
      //取消导出
      cancelExportData() {
        this.exportModal = false;
        this.dataTotal = [];
        this.percent = 0
      }
        }
    }
</script>        

这是针对我们公司后台获取数据缓慢，切容易崩掉的处理。