思路：
渲染的是能分页的内容，我们一般会下载查询条件下的所有的内容，因此我们需要又一个隐藏的表格将所有的内容渲染进去，分页的渲染进行展示，所有的渲染进行下载；
代码示例：html
<!--页面渲染的表格-->
<el-table :data="tableDataArr" stripe style=" 100%" v-loading="loading">
<el-table-column prop="xIndex" label="序号" width="50" align="center" header-align="center"></el-table-column>
<el-table-column
prop="invitationCode"
label="邀请者邀请码"
width="120"
align="center"
header-align="center"
></el-table-column>
<el-table-column
prop="invitationOpenId"
label="邀请者openId"
width="280"
align="center"
header-align="center"
></el-table-column>
<el-table-column
prop="invitationIp"
label="邀请者IP"
width="150"
align="center"
header-align="center"
></el-table-column>
<el-table-column
prop="invitationCountry"
label="邀请者国家"
width="100"
align="center"
header-align="center"
></el-table-column>
<el-table-column
prop="invitationTime"
label="邀请时间"
width="180"
align="center"
header-align="center"
></el-table-column>
<el-table-column
prop="beInvitationCode"
label="被邀请者邀请码"
width="120"
align="center"
header-align="center"
></el-table-column>
<el-table-column
prop="beInvitationOpenId"
label="被邀请者openId"
width="280"
align="center"
header-align="center"
></el-table-column>
<el-table-column
prop="beInvitationIp"
label="被邀请者IP"
width="150"
align="center"
header-align="center"
></el-table-column>
<el-table-column
prop="beInvitationCountry"
label="被邀请者国家"
width="110"
align="center"
header-align="center"
></el-table-column>
</el-table>
<!-- 下载的总表格绘制 -->
<el-table :data="tableData" stripe style=" 100%; display:none" id="out-table">
<el-table-column prop="xIndex" label="序号" width="50" align="center" header-align="center"></el-table-column>
<el-table-column
prop="invitationCode"
label="邀请者邀请码"
width="120"
align="center"
header-align="center"
></el-table-column>
<el-table-column
prop="invitationOpenId"
label="邀请者openId"
width="280"
align="center"
header-align="center"
></el-table-column>
<el-table-column
prop="invitationIp"
label="邀请者IP"
width="150"
align="center"
header-align="center"
></el-table-column>
<el-table-column
prop="invitationCountry"
label="邀请者国家"
width="100"
align="center"
header-align="center"
></el-table-column>
<el-table-column
prop="invitationTime"
label="邀请时间"
width="180"
align="center"
header-align="center"
></el-table-column>
<el-table-column
prop="beInvitationCode"
label="被邀请者邀请码"
width="120"
align="center"
header-align="center"
></el-table-column>
<el-table-column
prop="beInvitationOpenId"
label="被邀请者openId"
width="280"
align="center"
header-align="center"
></el-table-column>
<el-table-column
prop="beInvitationIp"
label="被邀请者IP"
width="150"
align="center"
header-align="center"
></el-table-column>
<el-table-column
prop="beInvitationCountry"
label="被邀请者国家"
width="110"
align="center"
header-align="center"
></el-table-column>
</el-table>
代码示例：js
import { formatDate } from "@/utils/jsExtend.js";
import { listInvitationDataApi } from "@/api/stats.js";
// 引入导出Excel表格依赖
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
data() {
return {
params: {
appId: '',
dateBegin: '',
dateEnd: '',
code: '',
},
loading: false,
// 临时
datetimerange: [],
tableTotal: 0,
tableData: [], //邀请列表
tableDataArr: [], //邀请列表分组
pageSize: 10,
pageNo: 1,
TF:false
}
},
created() {
this.defaultTime();
},
mounted() {
this.params.appId = this.$store.getters.appInfo.id;
},
methods: {
//默认时间
defaultTime() {
var timeVal = new Date().getTime() - 24 * 60 * 60 * 1000
this.params.dateBegin = formatDate(timeVal, "yyyy-MM-dd");
this.params.dateEnd = formatDate(timeVal, "yyyy-MM-dd");
this.datetimerange = [this.params.dateBegin, this.params.dateEnd]
},
//定义导出Excel表格事件
exportExcel() {
/* 从表生成工作簿对象 */
var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
/* 获取二进制字符串作为输出 */
var wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array"
});
try {
FileSaver.saveAs(
//Blob 对象表示一个不可变、原始数据的类文件对象。
//Blob 表示的不一定是JavaScript原生格式的数据。
//File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
//返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
new Blob([wbout], { type: "application/octet-stream" }),
//设置导出文件名称
'邀请数据' + this.params.dateBegin + '-' + this.params.dateEnd + ".xlsx"
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout;
},
// 筛选时间
changeExpireSection(val) {
console.log(val)
if (val != null) {
this.params.dateBegin = formatDate(val[0], "yyyy-MM-dd");
this.params.dateEnd = formatDate(val[1], "yyyy-MM-dd");
console.log(this.params)
} else {
this.defaultTime();
}
if (val == null) {
this.defaultTime();
}
},
//获取信息列表
listInvitationData() {
var params = this.params
this.loading = true;
listInvitationDataApi(params).then(res => {
this.loading = false;
for (var i = 0; i < res.length; i++) {
res[i].invitationTime = this.renderTime(res[i].invitationTime)
res[i].xIndex = i + 1;
}
this.tableData = res;
this.tableTotal = res.length;
this.renderPage();
})
},
//改变时间格式
renderTime(date) {
var dateee = new Date(date).toJSON();
return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/.[d]{3}Z/, '')
},
//分页循环
renderPage() {
var newArr = []
for (var i = 0; i < this.pageSize; i++) {
if (this.tableTotal > ((this.pageNo - 1) * this.pageSize + i)) {
newArr.push(this.tableData[(this.pageNo - 1) * this.pageSize + i])
} else {
break;
}
}
this.tableDataArr = newArr;
},
lookUp() {
this.listInvitationData();
},
changePageNum(val) {
this.pageNo = val;
this.renderPage();
},
handleSizeChange(val) {
this.pageSize = val;
this.renderPage();
},
}
}