前端分页功能（封装好的组件）

1. 封装好的分页组件

//页码
<template><!-- 页码  --><div class="page"><el-paginationbackground:current-page="pageNum":page-size="pageSize":total="pageTotal"layout="prev, pager, next"@current-change="handlePageChange":hide-on-single-page="true"/></div>
</template><script>export default {name: "Page",props: {pageNum: { type: Number},pageSize: { type: Number},pageTotal: { type: Number},},methods: {handlePageChange(pageNum) {this.$emit('handlePageChange', pageNum);},}}
</script><style lang="less" scoped>.page {margin-right: 24px;margin-top: 16px;display: flex;justify-content: flex-end;}
</style>
<style lang="less">.page {.el-pagination.is-background .el-pager li:not(.disabled).active {background-color: #0183FF;color: #fff;border: 1px solid #0183FF;}.el-pagination.is-background .btn-next,.el-pagination.is-background .btn-prev,.el-pagination.is-background .el-pager li {color: #fff;font-weight: 400;background-color: #1F2940;border: 1px solid #ccc;}.el-pagination.is-background .el-pager li:not(.disabled):hover {color: #fff;}}
</style>

2. 使用这个分页组件

在使用分页的父组件中：

<!-- 页码  -->
<Page :pageNum="pageNum":pageSize="pageSize":pageTotal="pageTotal"@handlePageChange="handlePageChange"
/>

data() {return {pageNum: 1,              //当前页pageSize: 12,            //每页显示多少条pageTotal: 1,            //一共多少页}
}

methods: {handlePageChange(pageNum) {this.pageNum = pageNum;//调获取表格数据的接口，把pageNum、pageSize传给后端//后端返回pageTotal},
}

前端分页功能（封装好的组件）相关推荐

vue+elementUI组件table实现前端分页功能
前端分页和后端分页就是请求的差异,前端分页的话只请求一次,所以要在render table组件的时候控制下数据 :data="tableData.slice((currentPage-1)* ...
使用bootstarp前端组件集成的table 分页组件；简单上手使用实现前端分页功能
文章目录 1. 下载bootstarp 2. 下载使用 bootstrap-table 3.部分代码 4.具体效果注意这是前端分页实现哦, 在后端会一次性把数据取过来的,慎用啊
前端分页功能的实现以及原理
分页场景常见于电商网站,比如说淘宝天猫的评论区,分页功能一般是后台实现,前端请求就完事了.现闲得无聊,就写出来玩玩,只实现功能,并未封装. 以前写过一篇下拉刷新.加载数据功能博客,也附上链接,可点击查 ...
vue组件封装技巧，如何对vue模块进行功能封装
如何对vue模块进行功能封装,vue组件封装技巧当业务不断累加,导致原本干净整洁的代码越来越冗余,各种变量和注释已经让他人望而却步,往往又苦于重构带来的成本,导致诞生很多巨石应用.与其让自己或他人面 ...
vue element-UI前端分页
需求:后台获取数据,在前端分页说明:在table组件加入 :data="tableData.slice((currentPage-1)*pagesize,currentPage*pages ...
cmdb python 采集虚拟机_Python编程(三十四)：CMDB后台管理、封装自定义JS组件、前端td标签定制显示内容及属性...
一. CMDB后台管理 CMDB管理主要分为采集资产.API接口.后台管理.这里主要介绍CMDB后台管理. - 采集资产 - API - 后台管理- 资产列表- 业务线列表- 用户列表- 组列表... ...
前端vue实现分页功能
前端Vue实现分页功能我们都知道在spring boot项目中安装pagehelper可以实现分页功能,但是在vue中也能在前端实现分页. 1. 首先,在data中定义以下变量: data() {r ...
前端：uniapp封装组件用法笔记
大家在做前端项目开发的时候,经常会遇到公用的一些页面,比如搜索.列表.商品详情卡片.评论列表等.为了提高开发效率.使代码看起来更加简洁,这个时候封装相应的组件是最好的解决方案.今天小编给大家介绍一下如 ...
带分页功能的SSH整合，DAO层经典封装
任何一个封装讲究的是,使用,多状态. Action: 任何一个Action继承分页有关参数类PageManage,自然考虑的到分页效果,我们必须定义下几个分页的参数.并根据这个参数进行查值. 然后在继 ...

前端分页功能（封装好的组件）

1. 封装好的分页组件

2. 使用这个分页组件

前端分页功能（封装好的组件）相关推荐

最新文章

热门文章