vue+element-ui el-pagination 分页后 导出全部数据

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    
    }
)}

链接：深拷贝方式

总结

找了文章下来目前都没有特别理想的方式，大概原理是：对分页数据进行全部数据展示然后进行展示导出最后进行原始数据的还原操作。
这里如果有其他更好的办法可以留言互相学习