Oracle之 UTL_FILE 包用法详解_bootstrap表格分页

全栈程序员站长

发布于 2022-09-27 14:43:58

4450

发布于 2022-09-27 14:43:58

文章被收录于专栏：全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

前言：在上篇文章中我们说到了：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.cn/193289.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

java

https

javascript

网络安全

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度