将两表格导入页面后,设置分页,无法将分页后的数据导出excel,只能导出第一页;
解决办法:
通过
$nextTick()
,简单的来说是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后使用$nextTick,则可以在回调中获取更新后的DOM(dom的改变是发生在nextTick()之后),这个方法作用是当数据被修改后使用这个方法,会回调获取更新后的dom再render出来。
Vue.nextTick()作用:在下次dom更新循环结束之后,执行延迟回调。在修改数据之后立即使用这个方法,获得更新后的dom。
简而言之,如果你在数据改变之后的操作跟改变之后的DOM有关,那么就应该使用Vue.nextTick()。
1、Element组件库中的el-table表格导出需要的主要是两个依赖:(xlsx 和 file-saver)
1 npm install --save xlsx file-saver
2、导出表格,方法:
1 // 数据导出写入Excel
2 exportExcel() {
3 this.currentPage = 1; //当前页为第一页
4 this.limit = this.total; //每页大小限制条数:为总条数(将表格数据全部渲染出来在第一页上)
5 this.$nextTick(function () {
6 var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
7 /* 获取二进制字符串作为输出 */
8 var wbout = XLSX.write(wb, {
9 bookType: "xlsx",
10 bookSST: true,
11 type: "array",
12 });
13 try {
14 FileSaver.saveAs(
15 new Blob([wbout], { type: "application/octet-stream" }),
16 "历史记录.xlsx"
17 );
18 } catch (e) {
19 if (typeof console !== "undefined") console.log(e, wbout);
20 }
21 this.limit = 15; //导出之后再恢复原样,每页大小为限制条数为15条
22 return wbout;
23 });
24 },