0
0

40、使用elementUI分别实现前端，后端表格分页

说明：前端单独做的表格分页—用于解决数据过多页面渲染压力，如果是服务器响应数据过慢，使用第二种分页方法–后端分页。以下为分页效果

在这里插入图片描述

一、前端分页

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>exportdefault{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>exportdefault{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>
标签： 前端 elementui 状态模式
本文转载自: https://blog.csdn.net/ljl960426/article/details/131572803
版权归原作者 前端@伦伦 所有， 如有侵权，请联系我们删除。
登录后发布评论

“40、使用elementUI分别实现前端，后端表格分页”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

机器人技术在安全领域的重要作用

安全学习记录——网络篇（一）

图腾柱PFC：HP1010为您的电动两轮车之旅提供绿色，高效，安全的动力

单元测试数据库回滚问题

这才是单元测试，之前我们都错了

【C语言基础】：字符函数和字符串函数

ChatGPT-Next-Web SSRF漏洞+XSS漏洞复现(CVE-2023-49785)

文章导航