大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
前言：在上篇文章中我们说到了：Xlsx结合File-Saver实现前端页面表格导出Excel为文件，但是也有很棘手的问题，只能导出第一页的数据，那么我们今天来看看分页的数据怎么导出- – –
一.表格结构：
<el-table :data="adminData.slice((admincurrentPage-1)*adminpage,admincurrentPage*adminpage)" :cell-style="{ textAlign: 'center' }" :header-cell-style="{textAlign: 'center',background:'#eef1f6',color:'#606266'}" border style="width: 100%;height: 100%">
<el-table-column label="序号" width="55">
<template slot-scope="scope">
<span>{
{(admincurrentPage - 1) * adminpage + scope.$index + 1}}</span>
</template>
</el-table-column>
<el-table-column prop="_source.user.username" label="用户名" >
</el-table-column>
<el-table-column prop="_source.user.print_name" label="昵称" :show-overflow-tooltip="true" >
</el-table-column>
</el-table>
二.分页结构：
<el-pagination style="float: right" background @current-change="adminhandleCurrentChange" :current-page.sync="admincurrentPage" layout="prev, pager, next" :page-size="adminpage" :total="adminData.length" >
</el-pagination>
三.js逻辑代码：
daochu2() {
var that = this;
that.$message({
type: 'success',
message: `数据导出中...`
});
this.adminpage=this.adminData.length;
this.admincurrentPage=1;
// 导出的内容只做解析，不进行格式转换
this.$nextTick(function () {
let xlsxParam = {
raw: true};
let wb = XLSX.utils.table_to_book(document.querySelector(".data-telegram"), xlsxParam);
const wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array"
});
try {
FileSaver.saveAs(new Blob([wbout], {
type: "application/octet-stream"}), '信息表.xlsx');
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
this.adminpage=10;
this.admincurrentPage=1;
return wbout;
});
},
四.代码解析：
主要的就是以下几行代码：
this.adminpage代表的是我们分页每页的数据，我们定义为数据的总长度，就会导出数据的所有值this.admincurrentPage代表的是当前为第几页this.adminpage=this.adminData.length; this.admincurrentPage=1;
导出之后我们需要一下的代码进行复原：将其重新定义为页面显示的数据，一页为10条；
this.adminpage=10;
this.admincurrentPage=1;
this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/193289.html原文链接：https://javaforall.net
