说明：前端单独做的表格分页—用于解决数据过多页面渲染压力，如果是服务器响应数据过慢，使用第二种分页方法–后端分页。以下为分页效果
一、前端分页
1、创建表格
<el-table :key="new Date().getTime()" :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" row-key="id" ref="table" style="width: 100%" > <template v-for="(item, idx) in tableHead"> <el-table-column :key="item.key" :prop="item.value" :label="item.name" align="center" > </el-table-column> </template> </el-table>
说明：slice(a,b)的作用是从已有的数组中返回选定的元素"a"表示开始，"b"表示结束。 而currentPage和pageSize在此网页的作用会在接下来进行说明。
2、创建分页
<el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[1,5,10,20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="tableData.length"></el-pagination>
说明分页器绑定变量说明：
:current-page的值表示当前是第几页；
:page-sizes的值表示可以选择一页多少条；
:page-size的值表示当前一页显示几条；
layout的值表示分页需要显示的内容，例如“total” 表示总数、“next” 表示下一页等；
:total的值表示共多少条数据；
根据变量pageSize值，以及当前页变量currentPage，在界面上会自动把分的页显示出来，如上图中的：1、2、3……6…。
3、在data中定义变量
data() { return { tableData: [], tableHead: [ {name: "母线名称", value: 'busName', }, {name: "电压等级", value: 'voltageLevel', }, {name: "开始时间", value: 'startDate', }, {name: "恢复时间", value: 'recoverDate', }, {name: "持续时间(分钟)", value: 'continuedDate', }, {name: "越限类型", value: 'limitType', }, {name: "越限极值", value: 'limitValue', }, ], currentPage: 1, total: 20, pageSize: 2, }; },
4、 添加事件
methods: { handleSizeChange(val) { console.log(`每页 ${val} 条`); this.currentPage = 1; this.pageSize = val; }, handleCurrentChange(val) { console.log(`当前页: ${val}`); this.currentPage = val; }}
5、完整前端分页代码展示
<template> <div class="v-table" ref="tableheight" style="width: 100%; height: 100%"> <el-table :key="new Date().getTime()" :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" row-key="id" ref="table" style="width: 100%;height: calc(100% - 60px)" > <template v-for="(item, idx) in tableHead"> <el-table-column :key="item.key" :prop="item.value" :label="item.name" align="center" > </el-table-column> </template> </el-table> <!-- 分页器 --> <div class="block-box"> <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[1,5,10,20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="tableData.length"> </el-pagination> </div> </div></template><script> export default { data() { return { tableData: [ { busName:"xxx", voltageLevel:"", startDate:"", recoverDate:"", continuedDate:"", limitType:"", limitValue:"", },{ busName:"xxx", voltageLevel:"", startDate:"", recoverDate:"", continuedDate:"", limitType:"", limitValue:"", },{ busName:"xxx", voltageLevel:"", startDate:"", recoverDate:"", continuedDate:"", limitType:"", limitValue:"", },{ busName:"xxx", voltageLevel:"", startDate:"", recoverDate:"", continuedDate:"", limitType:"", limitValue:"", },{ busName:"xxx", voltageLevel:"", startDate:"", recoverDate:"", continuedDate:"", limitType:"", limitValue:"", },{ busName:"xxx", voltageLevel:"", startDate:"", recoverDate:"", continuedDate:"", limitType:"", limitValue:"", },{ busName:"xxx", voltageLevel:"", startDate:"", recoverDate:"", continuedDate:"", limitType:"", limitValue:"", }, ], tableHead: [ {name: "母线名称", value: 'busName', }, {name: "电压等级", value: 'voltageLevel', }, {name: "开始时间", value: 'startDate', }, {name: "恢复时间", value: 'recoverDate', }, {name: "持续时间(分钟)", value: 'continuedDate', }, {name: "越限类型", value: 'limitType', }, {name: "越限极值", value: 'limitValue', }, ], currentPage: 1, total: 20, pageSize: 2, }; }, mounted() { }, methods: { handleSizeChange(val) { this.currentPage = 1; this.pageSize = val; }, handleCurrentChange(val) { this.currentPage = val; }, } };</script><style lang="less"> .v-table { .block-box{ width: 100%; height: 50px; margin-top: 10px; display: flex; justify-content: center; align-items: center; } }</style>
二、后端分页
后端分页就是，根据前端所给后端传的两个参数处理判断响应数据，第一参数：每一页多少条数据pageSize，第二个参数：当前所选中的页码currenPage，进行
说明：表格模板代码以及分页器代码创建步骤同上，唯一不同就是总表格数据条数:total不就是后端响应的表格数据长度，需要后端另外返回表格数据总数;否则分页器只显示第1页。
1、js代码
methods: { handleSizeChange(val){ this.pageSize = val; this.params = { pageSize:this.pageSize, currentPage:this.currentPage, } this.getDialogData(val,this.currentPage,this.dialogTableUrl, this.params); }, handleCurrentChange(val){ this.currentPage = val; this.params = { pageSize:this.pageSize, currentPage:this.currentPage, } this.getDialogData(this.pageSize,val,this.dialogTableUrl, this.params); }, getDialogData(pageSize,currentPage,url, params) { getRequestData(url, 'get', params).then((res) => { if (res.status == 200){ let data = res.data.data; this.total = data.num; this.tableData = data.list } }) },}
3.完整后端分页代码
<template> <div class="v-table" ref="tableheight" style="width: 100%; height: 100%"> <el-table :key="new Date().getTime()" :data="tableData" row-key="id" ref="table" style="width: 100%;height: calc(100% - 60px)" > <template v-for="(item, idx) in tableHead"> <el-table-column :key="item.key" :prop="item.value" :label="item.name" align="center" > </el-table-column> </template> </el-table> <!-- 分页器 --> <div class="block-box"> <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[1,5,10,20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> </div> </div></template><script> export default { data() { return { tableData: [ { busName:"xxx", voltageLevel:"", startDate:"", recoverDate:"", continuedDate:"", limitType:"", limitValue:"", },{ busName:"xxx", voltageLevel:"", startDate:"", recoverDate:"", continuedDate:"", limitType:"", limitValue:"", },{ busName:"xxx", voltageLevel:"", startDate:"", recoverDate:"", continuedDate:"", limitType:"", limitValue:"", },{ busName:"xxx", voltageLevel:"", startDate:"", recoverDate:"", continuedDate:"", limitType:"", limitValue:"", },{ busName:"xxx", voltageLevel:"", startDate:"", recoverDate:"", continuedDate:"", limitType:"", limitValue:"", },{ busName:"xxx", voltageLevel:"", startDate:"", recoverDate:"", continuedDate:"", limitType:"", limitValue:"", },{ busName:"xxx", voltageLevel:"", startDate:"", recoverDate:"", continuedDate:"", limitType:"", limitValue:"", }, ], tableHead: [ {name: "母线名称", value: 'busName', }, {name: "电压等级", value: 'voltageLevel', }, {name: "开始时间", value: 'startDate', }, {name: "恢复时间", value: 'recoverDate', }, {name: "持续时间(分钟)", value: 'continuedDate', }, {name: "越限类型", value: 'limitType', }, {name: "越限极值", value: 'limitValue', }, ], currentPage: 1, total: 20, pageSize: 2, }; }, mounted() { }, methods: { handleSizeChange(val) { this.currentPage = 1; this.pageSize = val; }, handleCurrentChange(val) { this.currentPage = val; }, } };</script><style lang="less"> .v-table { .block-box{ width: 100%; height: 50px; margin-top: 10px; display: flex; justify-content: center; align-items: center; } }</style>
