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

news2024/12/28 18:50:46

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

在这里插入图片描述

一、前端分页

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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/723286.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Linux samba服务器配置教程

Linux samba服务器配置教程

此教程适用于Centos 和 Ubuntu&#xff0c;其它Linux系统一般大概率配置命令相同&#xff01; 一、关闭防火墙 1. Centos 查看防火墙状态&#xff1a;systemctl status firewalld.service 关闭防火墙&#xff1a;systemctl stop firewalld.service 永久关闭防火墙&#xff…
阅读更多...
Node中npm基本使用

Node中npm基本使用

1.创建文件夹 说明&#xff1a;创建一个空文件夹&#xff0c;然后以此目录为工作目录&#xff0c;执行npm init,交互式创建package.json文件(包的配置文件) npm init 注意&#xff1a;package下的name属性不能使用中文&#xff0c;大写&#xff0c;默认值为文件名的名称&…
阅读更多...
eNSP-ACL分类

eNSP-ACL分类

ACL分类 文章目录 ACL分类一、题目要求二、题目分析三、拓扑结构四、基本配置五、测试验证 一、题目要求 1 、 client1能够 ping通server&#xff0c;但是不能telnet 2 、 client2能够 telnet, 但是不能 ping 通server 3 、 使用一张 ACL列表 二、题目分析 使用高级ACL在AR3的…
阅读更多...
商用车自动驾驶线控底盘测试报告

商用车自动驾驶线控底盘测试报告

一&#xff0e;概述 商用车线控底盘主要用于接收控制指令&#xff0c;完成相应的驱动、档位、制动、转向、声光等动作&#xff0c;从而实现自动驾驶功能。 底盘线控系统测试目的是对驾驶模式&#xff08;Drive Mode&#xff09;、油门&#xff08;Throttle&#xff09;、档位&a…
阅读更多...
window10环境下安装pycocotools报错及解决办法

window10环境下安装pycocotools报错及解决办法

相信大家入门安装相关深度学习项目时可能会遇到相关pycocotools&#xff0c;或者ninja的相关报错&#xff0c;下面图是网上拿的&#xff0c;真实报错我忘了截图&#xff0c;但是报错信息如果提到安装Microsoft Visual Tolls&#xff0c;大概率这个可行。 在网上找了很多推荐的…
阅读更多...
Kubernetes（k8s）超详细的安装步骤

Kubernetes（k8s）超详细的安装步骤

目录 一、环境设置 二、基本环境配置 &#xff08;一&#xff09;主机名配置 1、在master虚拟机上操作 2、在node1r虚拟机上操作 3、在node2虚拟机上操作 &#xff08;二&#xff09;VMware网络配置 &#xff08;三&#xff09;虚拟机网络配置 1、在master虚拟机上操作…
阅读更多...
关于微服务治理的一些理解

关于微服务治理的一些理解

关于微服务治理的一些理解 微服务架构存在的意义 根本意义 其主要目的还是为了解耦&#xff0c;提高灵活性和可扩展性&#xff01; 参考&#xff1a;https://zhuanlan.zhihu.com/p/462078779 相比单体 单体架构的性能高于微服务架构&#xff0c;微服务的负载能力低于单体架构…
阅读更多...
『MySQL快速上手』Centos 7安装MySQL详解

『MySQL快速上手』Centos 7安装MySQL详解

文章目录 1.卸载掉之前安装的MySQL2.检查系统安装包3.卸载默认安装包4.获取mysql官方yum源5.安装mysql yum源6.安装mysql服务7.查看配置⽂件和数据存储位置8.启动mysql服务9.登录mysql方法一 使用临时密码方法二 直接登录方法三 设置免密码登录 10.设置开机自动启动&#xff08…
阅读更多...
【探索AI未来】自动驾驶时代下的人工智能技术与挑战

【探索AI未来】自动驾驶时代下的人工智能技术与挑战

自我介绍⛵ &#x1f4e3;我是秋说&#xff0c;研究人工智能、大数据等前沿技术&#xff0c;传递Java、Python等语言知识。 &#x1f649;主页链接&#xff1a;秋说的博客 &#x1f4c6; 学习专栏推荐&#xff1a;MySQL进阶之路、C刷题集、网络安全攻防姿势总结 欢迎点赞 &…
阅读更多...
TensorFlow项目练手（一）——天气预测

TensorFlow项目练手（一）——天气预测

项目介绍 通过以往的天气数据和实际天气温度&#xff0c;做一次回归预测&#xff0c;模型的输入是当前的所有特征值&#xff0c;而模型的输出是当天的实际天气温度 字段分析 目前已有的数据有348条svc数据&#xff0c;他们的字段分别代表 year&#xff1a;年month&#xff…
阅读更多...
法雷奥汽车 研发工程师笔试题

法雷奥汽车 研发工程师笔试题

Adding to pointer that points to an array will______. A. cause an error B.increase the value of the element that the pointer is pointing to C.cause the pointer to point to the next element in the array D.none of the above C. 使指针指向数组中的下一个元素。 …
阅读更多...
厄尔尼诺连续高温会导致能源中的原油、天然气、煤炭和电力等期货品种价格下跌

厄尔尼诺连续高温会导致能源中的原油、天然气、煤炭和电力等期货品种价格下跌

厄尔尼诺是一种发生在热带海洋中的异常现象&#xff0c;其显著特征是赤道太平洋东部和中部海域海水出现显著增温。厄尔尼诺会导致全球气候变化&#xff0c;影响农业、林业、畜牧业、渔业、交通运输业等领域&#xff0c;进而对大宗商品期货行业产生重大影响。本文将从以下几个方…
阅读更多...
docker安装的mysql更改全文检索分词配置

docker安装的mysql更改全文检索分词配置

这里使用的是mysql8.0&#xff0c;默认使用ngram分词 这里是已经将文件从容器中挂载出来了&#xff0c;没挂载出来要去容器内部更改my.cnf文件并重启mysql容器 步骤 一、查看mysql的分词大小 show variables like %token%;ngram_token_size这里默认是2我已经改为1了 这个值…
阅读更多...
Lua学习笔记：浅谈table的实现

Lua学习笔记：浅谈table的实现

前言 本篇在讲什么 Lua中的table的实现 本篇适合什么 适合初学Lua的小白 本篇需要什么 对Lua语法有简单认知 依赖Sublime Text编辑器 本篇的特色 具有全流程的图文教学 重实践&#xff0c;轻理论&#xff0c;快速上手 提供全流程的源码内容 ★提高阅读体验★ &…
阅读更多...
CIO40---22亿灯塔工厂建设规划之工业4.0

CIO40---22亿灯塔工厂建设规划之工业4.0

1-灯塔工厂规划&#xff1a; 行业趋势 在人工智能、物联网和5G技术的深度渗透下&#xff0c;3C既能作为交互的入口又能是交互的出口&#xff0c;3C产业已成为场景最丰富的产业领域&#xff0c;柔性化生产、个性化定制才能给用户提供更好的体验。市场需求要求企业进行数字化升级…
阅读更多...
UE4 如何设置玩家Character的两个位置和角度之间的切换

UE4 如何设置玩家Character的两个位置和角度之间的切换

问题&#xff1a;玩家Character的角度不能直接去设置其中的Camera角度&#xff0c;因为Camera的角度是由鼠标X/Y移动增量决定的&#xff0c;同时把Camera的角度传给PlayController中的PlayCameraManneger&#xff0c;PlayCameraManneger是所有Pawn类型的Camera视口总管&#xf…
阅读更多...
Netty的事件驱动模型nio,epoll,oio各个使用场景和支持的网络通讯协议

Netty的事件驱动模型nio,epoll,oio各个使用场景和支持的网络通讯协议

1.首先说一下nio和epoll有什么区别 在Netty中&#xff0c;Epoll和NIO是两种不同的事件驱动模型&#xff0c;用于实现网络通信。它们在底层的实现和性能特征上有一些区别。 1. NIO&#xff08;Non-blocking I/O&#xff09;&#xff1a;NIO是Java原生的非阻塞I/O模型&#xff…
阅读更多...
【NX】NX二次开发中判断曲线是否重合

【NX】NX二次开发中判断曲线是否重合

在NX二次开发中&#xff0c;并没有直接的函数判断两条曲线是否重合&#xff0c;那么我们自己有没有办法判断两条曲线是否重合呢&#xff0c;自然是有的&#xff0c;那么首先我们得定义一下什么叫做重合&#xff0c;几乎重合的曲线算重合吗&#xff0c;这里就涉及到一个容忍度的…
阅读更多...
如何控制滚轮横向滑动(原生JS实现方法)

如何控制滚轮横向滑动(原生JS实现方法)

控制滚轮横向滑动 提示&#xff1a;这个是以前讨论的时候遇到的情况 ; 回头想了一下应用场景确实挺多的,.所以今天趁周末大致的记录一下如何通过js去实现【横向滚动】 文章目录 控制滚轮横向滑动解决思路如下1.如何在页面中展示横向滚动条2.如何获取鼠标的【滚动轮】3.通过什么…
阅读更多...
AI for Science 交流会来了！科学计算前沿邀您共同探讨

AI for Science 交流会来了！科学计算前沿邀您共同探讨

随着深度学习不断驱动技术创新&#xff0c;人工智能科学计算迈向高质量发展道路。百度飞桨作为科学计算的坚定支持者&#xff0c;计划于7月13日举办飞桨科学计算线下交流会。本次交流会以百度飞桨深度学习框架为基座&#xff0c;广泛联动人工智能科学计算领域头部专家学者、高等…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023