vue+element-ui el-pagination 分页后 导出全部数据
vue+element-ui el-pagination 分页后 数据无法全部导出
- element-ui分页后的数据无法导出
- nextTick方式
- setTimeOut方式
- 深拷贝方式
- 总结
element-ui分页后的数据无法导出
最近项目使用element-ui进行前端开发，主要用来做固定报表的页面数据展示，必不可少的要使用到分页，但使用分页后导出Excel只能导出当前页，很是郁闷网上查到许多办法后最终找到以下几个办法真身使用的是setTimeout方法
nextTick方式
exportExcel () {this.pagesize = '30';//表格长度变长this.currentPage= '1';this.$nextTick(function () {let wb = XLSX.utils.table_to_book(document.querySelector('#srpgtable'));/* get binary string as output */let 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.pagesize = '10';//表格还原return wbout})},
链接: nextTick方式(未做测试).
setTimeOut方式
虽然这种方式原文中会有函数相互调用的错误，不知道是作者不小心还是在源码中有其他方式解决。我的项目中只使用了setTimeOut
export2Excel (elementId,excelName){//this.page.totalCount 数据总条数this.page.pageSize=this.page.totalCount;setTimeout(() => {// 这里是普通的导出，抽取出来做了公共方法// elementId：tableid名称// excelName: 到处是文件名kede.export2ExcelPublic(elementId,excelName);}, 1000);setTimeout(() => {this.page.pageSize =20;}, 1000);},链接: setTimeOut方式
深拷贝方式
这个是搜了好久搜到一篇文章在掘金网上，看了一下应该是使用深拷贝，考呗tableData的数据到临时数组中做的操作，原谅我没看明白。
exportTable(tableid, name) { let tpage1 = this.$deepCopy(this.page1) 先去除分页 let tpage2 = this.$deepCopy(this.page2) this.page1 = {} this.page2 = {} this.$nextTick(function() { exportExcel(tableid, `${name}${this.start_date}~${this.end_date}`) this.page1 = tpage1 this.page2 = tpage2 }
)}
链接：深拷贝方式
总结
找了文章下来目前都没有特别理想的方式，大概原理是：对分页数据进行全部数据展示然后进行展示导出最后进行原始数据的还原操作。
这里如果有其他更好的办法可以留言互相学习
vue+element-ui el-pagination 分页后 导出全部数据相关推荐
- 【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录 目标 代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式 总 ...
- Vue Element UI 表格组件 利用插槽实现按下按钮后获得本行数据（内容）
Vue Element UI 表格组件 利用插槽实现按下按钮后获得本行数据(内容) 能够解决的问题 需要在表格中添加一个类似修改或编辑的按钮,按下按钮,弹出的窗口需要本行的渲染数据 需要向服务端提交一 ...
- 【前端】Vue+Element UI案例：通用后台管理系统-代码总结（已开源）
文章目录 前言 项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...
- 【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录 目标 代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
- 【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录 目标 代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题 总代码 本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...
- vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来 前言 后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
- 【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架 前言 后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
- 基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
- nodeJs + webpack+vue+ element ui 环境安装
一.安装nodeJs 1.打开NodeJs官网:https://nodejs.org/en/download/ 点击下载 2.双击安装,安装过程基本直接"NEXT"就可以了.(w ...
最新文章
- 【rnnoise快速体验】rnnoise从编译到训练
- UITabBarController
- MxGraph从入门到精通之4：布局
- HTML5移动端拖动惯性
- wxWidgets：缓冲区类
- sharing分片集合环境搭建【MongDB系列之七】
- 自动化打包资源混淆集成python实践----资源混淆
- 【转】【C#】使用fo-dicom完成BMP，JPG，PNG图片转换为DICOM文件
- Python-异常处理
- 十万开发者票选，顶级当红讲师来了！
- 优化无极限：从96秒到1.5秒
- C语言有符号和无符号数
- OPPO R11刷机初体验
- 微众银行--java面试题一
- 如何制定软件开发计划
- 面试中问到fiddler的那些问题
- js版in_array函数
- 面试官：说说你对SPA（单页应用）的理解?
- Python之XML解析
- 谈谈网络蜘蛛 爬开心网001的一些体会