vue2自定义分页组件，可设置每页显示数量，指定跳转具体页面

https://blog.csdn.net/yangwei282367751/article/details/82722840

分页组件
<template>
<div>
<div class="page-helper" v-if="showPageHelper">
<div class="page-list">
<span>共{{ totalPage }}页 / {{ totalCount }}条</span>
<span class="page-item" @click="jumpPage(1)">首页</span>
<span class="page-item" :class="{'disabled': currentPage === 1}" @click="prevPage">上一页</span>
<span class="page-ellipsis" v-if="showPrevMore" @click="showPrevPage">...</span>
<span class="page-item" v-for="num in groupList" :class="{'page-current':currentPage===num}" :key="num"
@click="jumpPage(num)">{{num}}</span>
<span class="page-ellipsis" v-if="showNextMore" @click="showNextPage">...</span>
<span class="page-item" :class="{'disabled': currentPage === totalPage}" @click="nextPage">下一页</span>
<span class="page-item" @click="jumpPage(totalPage)">末页</span>
<select class="page-select" @change="jumpPage(currentPage)" v-model="currentSize">
<option v-for="size in pageSizeArray" :key="size" :value="size">{{ size }}条/页</option>
</select>
<span class="ml20">跳至</span>
<span class="page-jump-to"><input type="type" v-model="jumpPageNumber"></span>
<span>页</span>
<span class="page-item jump-go-btn" @click="goPage(jumpPageNumber)">GO</span>
</div>
</div>
</div>
</template>

<script>
export default {
name: 'pageHelper',
data () {
return {
currentPage: this.pageNumber,
currentSize: this.pageSizeArray[0],
jumpPageNumber: 1,
showPrevMore: false,
showNextMore: false
}
},
props: {
pageNumber: { //当前页面
type: Number,
default: 1
},
pageSizeArray: { //每页显示数量
type: Array,
default () {
return [10,20,30,50]
}
},
totalCount: { //总条数
type: Number,
default: 1000
},
pageGroup: { //连续页码个数
type: Number,
default: 5
}
},
computed: {
showPageHelper () {
return this.totalCount > 0
},
totalPage () { //总页数
return Math.ceil(this.totalCount / this.currentSize);
},
groupList () { //获取分页码
const groupArray = []
const totalPage = this.totalPage
const pageGroup = this.pageGroup
const _offset = (pageGroup - 1) / 2
let current = this.currentPage
const offset = {
start: current - _offset,
end: current + _offset
}
if (offset.start < 1) {
offset.end = offset.end + (1 - offset.start)
offset.start = 1
}
if (offset.end > totalPage) {
offset.start = offset.start - (offset.end - totalPage)
offset.end = totalPage
}
if (offset.start < 1) offset.start = 1
this.showPrevMore = (offset.start > 1)
this.showNextMore = (offset.end < totalPage)
for (let i = offset.start; i <= offset.end; i++) {
groupArray.push(i)
}
return groupArray
}
},
methods: {
prevPage () {
if (this.currentPage > 1) {
this.jumpPage(this.currentPage - 1)
}
},
nextPage () {
if (this.currentPage < this.totalPage) {
this.jumpPage(this.currentPage + 1)
}
},
showPrevPage() {
this.currentPage = this.currentPage - this.pageGroup > 0 ? this.currentPage - this.pageGroup : 1
},
showNextPage() {
this.currentPage = this.currentPage + this.pageGroup < this.totalPage ? this.currentPage + this.pageGroup : this.totalPage
},
goPage (jumpPageNumber) {
if(Number(jumpPageNumber) <= 0){
jumpPageNumber = 1
}if(Number(jumpPageNumber) >= this.totalPage){
jumpPageNumber = this.totalPage
}
this.jumpPage(Number(jumpPageNumber))
},
jumpPage (pageNumber) {
if (this.currentPage !== pageNumber) { //点击的页码不是当前页码
this.currentPage = pageNumber
//父组件通过change方法来接受当前的页码
this.$emit('jumpPage', {currentPage: this.currentPage, currentSize: this.currentSize})
}
}
},
watch: {
currentSize (newValue, oldValue) {
if(newValue !== oldValue){
if(this.currentPage >= this.totalPage){ //当前页面大于总页面数
this.currentPage = this.totalPage
}
this.$emit('jumpPage', {currentPage: this.currentPage, currentSize: this.currentSize})
}
}
}
}
</script>

<style scoped>
.page-helper {
font-weight: 500;
height: 40px;
text-align: center;
color: #888;
margin: 10px auto;
}
.page-list {
font-size: 0;
height: 50px;
line-height: 50px;
}
.page-list span {
font-size: 14px;
margin-right: 5px;
user-select: none;
}
.page-list .page-item {
border: 1px solid #aaa;
padding: 5px 8px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
cursor: pointer;
margin-right: 5px;
}
.page-ellipsis {
padding: 0 8px;
}
.page-jump-to input {
width: 45px;
height: 26px;
font-size: 13px;
border: 1px solid #aaa;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-align: center;
}
.page-list .jump-go-btn {
font-size: 12px;
}
.page-select{
border: 1px solid #aaa;
padding: 5px 8px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
cursor: pointer;
margin-right: 5px;
margin-left: 5px;
}
.page-list .page-item .disabled{
pointer-events: none;
background: #ddd;
}
.page-list .page-current {
cursor: default;
color: #fff;
background: #337ab7;
border-color: #337ab7;
}
</style>

父页面

<page-helper @jumpPage="jumpPage" :page-number="pageNumber" page-size-array="PageSizeArray"></page-helper>

效果图

vue2自定义分页组件，可设置每页显示数量，指定跳转具体页面相关推荐

Angular 自定义分页组件，自定义每页显示个数
后端返回列表是全部数据,分页前端做的,自定义分页组件实现前端分页,下图为分页效果: 1.创建page.component.html <nav class="navigation&quo ...
mvc jquery ajax分页实例,jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解，mvcpagerajax分页...
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解,mvcpagerajax分页简单的两个步骤即可实现分页功能 //回调里面进行业务处理 function lo ...
GridView自定义分页样式（上一页，下一页，到第几页）（新手教程）
今天要为网站做一个文章列表,发现GridView的分页样式很难看,于是结合网上的例子,自己做了一个.不是很美观,不过还是很实用的,先看下效果吧,如图(1).演示地址http://www.veryam. ...
Python自定义分页组件
为了防止XSS即跨站脚本攻击,需要加上 safe # 路由 from django.conf.urls import url from django.contrib import admin from ...
关于element-ui的分页器设置每一页显示数量(page-size)后页码并没有变化的问题与解决
问题:element-ui的分页器在设置后,总页面数异常,不匹配总条数与单页显示数,设置page-size后页面也无变化 <ElPagination style="textAlign: ...
android 中间凸出按钮,自定义tabar组件，中间按钮凸出显示
更新记录 1.0.1(2020-11-17) 1.把图标更改成本地路径. 2.上传插件包时,如果包含static文件,一直提示不存在的错误,导致无法上传. 3.插件包仅包含components文件,所 ...
C++ cad设置视角居中显示在指定坐标以及视口的宽度和高度设置
//设置当前视图 AcDbViewTableRecord view; struct resbuf rb; struct resbuf ...
Django 分页组件替换自定义分页
Django的分页器(paginator) 总之不太好用我们还是用自己的好一些自定义分页器分页实现源码 """ 自定义分页组件 """c ...
yishaadmin，yishaadmin修改数据后回到起始页的解决办法，保持在修改前的页码，分页组件在修改数据后不返回到第一页
用过一沙框架开发的知道,一沙封装了很多js通用的方法,组件,其中ysTable()便是其中之一. 分页组件是包含在ysTable()中的,其中的分页组件,只有选择器类名,没有唯一的ID定位, 通过看页 ...

vue2自定义分页组件，可设置每页显示数量，指定跳转具体页面

vue2自定义分页组件，可设置每页显示数量，指定跳转具体页面相关推荐

最新文章

热门文章