vue el-table的分页显示和全集数据下载

分页显示采用的方法是在tableData里取当前页码对应的缓存数据，放到显示用的table区里。
而全集下载采用的方法是，下载函数读取加载的全集。

第一步：在vue的页面上，设置两个table区，一个是用于分页显示，一个用于缓存下载数据。

<common-table
:id=“tableid”
:tableData="
tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
"
:tableLabel=“tableLabel”
:config=“config”
@changePage=“setCurrentTablepage()”
>

<CommonTable_output
:id=“tableid_output”
:tableData=“tableData”
:tableLabel=“tableLabel”
:config=“config”
></CommonTable_output>

第二步：
在数据区定义下面的变量：
tableid: “table_visitorinfo”,
tableid_output: “table_output”, //用于缓存供下载使用
currentPage: 1, // 当前页码
pageSize: 20, // 每页显示的行数
tableData: [],

定义页号改变函数setCurrentTablepage，将变化的页码数赋值给vue页面的currentPage变量，用于加载分页的片段。
setCurrentTablepage() {
this.currentPage = this.config.page;
}

第三步：
在vue的窗体上，定义一个按键点击，调用导出excel的操作。这里面关键是要用tableid_output，作为输出表id索引。

exportExcel() {
this.downloadLoading = true;
var xlsxParam = { raw: true };
var wb = XLSX.utils.table_to_book(
document.querySelector(“#” + this.tableid_output),
xlsxParam
);
/* 获取二进制字符串作为输出 */
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”
}),
//设置导出文件名称
“output.xlsx”
);
} catch (e) {
if (typeof console !== “undefined”) console.log(e, wbout);
}
this.downloadLoading = false;
return wbout;
},

参考链接：
https://blog.csdn.net/weixin_45181761/article/details/108637343