分页器组件

article/2025/8/24 5:29:36

作为前端三剑客的分页器在许多场景都能使用，在实际工作中也有插件来快速实现分页器功能

但我们要了解原理，所以我们自己手搓个简单的分页器

先处理好静态组件

<template><div class="pagination"><button>1</button><button>上一页</button><button>···</button><button>3</button><button>4</button><button>5</button><button>6</button><button>7</button><button>···</button><button>9</button><button>上一页</button><button style="margin-left: 30px">共 60 条</button></div>
</template><script>export default {name: "Pagination",}
</script><style lang="less" scoped>.pagination {button {margin: 0 5px;background-color: #f4f4f5;color: #606266;outline: none;border-radius: 2px;padding: 0 4px;vertical-align: top;display: inline-block;font-size: 13px;min-width: 35.5px;height: 28px;line-height: 28px;cursor: pointer;box-sizing: border-box;text-align: center;border: 0;&[disabled] {color: #c0c4cc;cursor: not-allowed;}&.active {cursor: not-allowed;background-color: #409eff;color: #fff;}}}
</style>

然后从父组件传过对四个必要的参数

<template><div><!-- <Header> </Header><router-view></router-view><Footer v-show="$route.meta.show" > </Footer> --><Pagenation:total="total":Pagesize="Pagesize":PageNo="PageNo":Pagecount="Pagecount"@getpage='getpage'> </Pagenation></div>
</template><script>
export default {data() {return {
//:total="总数据数" :pageSize="一条页显示几个" :pageNo="当前页" :pagecount="连续页数目"total:100,//总数据数Pagesize:3 ,//一页显示多少个Pagecount:5,//连续页数目PageNo:7//当前页}},}
</script>

然后回到分页组件开始手搓

<template><div class="pagination"><h1>{{StartAndEnd}}</h1><!-- 绑定点击事件，但按钮不能一直增加 所以动态设置禁用条件 当点击到 1 时禁用 --><button  @click="$emit('getpage',pageNo-1)" :disabled="pageNo==1" >上一页</button><!-- 判断显示的条件 当  开始的值大于1时显示，等于1 时自动遍历的 --><button v-if="(StartAndEnd.start>1)" @click="$emit('getpage',1)">1</button><!-- 判断显示条件  1与相邻的数有间隔时显示无间隔时不显示 --><button v-if="(StartAndEnd.start>2)">···</button>
<!-- 遍历字符数字  当大于等于开始值的时候开始显示 -->
<!-- 使用 自定义事件 来进行父子间通信 -->
<!-- 动态绑定类名 --><button v-for="page in StartAndEnd.end" :key="page" v-if="page>=StartAndEnd.start"   @click="$emit('getpage',page)" :class="{active:pageNo==page}">{{page}}</button><!-- 判断省略号显示和隐藏的时机 --><button  v-if="StartAndEnd.end<totalPage-1" >···</button><button v-if="StartAndEnd.end<totalPage" @click="$emit('getpage',totalPage)">{{ totalPage }}</button><button @click="$emit('getpage',pageNo+1)" :disabled="pageNo==totalPage" >上一页</button>
<!-- 算出的有多少页数据 --><button style="margin-left: 30px">共 {{ totalPage }}条</button></div>
</template><script>
export default {name: "Pagesnation",//:total="100" :pageSize="5" :pageNo="5" :pagecount="8"//:total="总数据数" :pageSize="一条页显示几个" :pageNo="当前页" :pagecount="连续页数目"props: ["total", "pageSize", "pageNo", "pagecount"],computed: {//根据总数据和 和数据规模 算出 总页数totalPage() {//向上取整return Math.ceil(this.total / this.pageSize);},//判断开头和末尾StartAndEnd() {let { totalPage, pagecount, total, pageNo } = this;let start = 0;let end = 0;//情况一：计算出来的页数 小于规定的页数if (totalPage < pagecount) {start = 1;end = totalPage;}//情况二计算出的页数大于规定页数else {//规定页数为五页时前后加减二//规定页数为七页时前后加减三start = pageNo - parseInt(pagecount/2);end = pageNo + parseInt(pagecount/2);// //约束，当 pageNo - parseInt(pagecount / 2)<1时  不能小于1if(pageNo - parseInt(pagecount/2)<1){start=1;end=pagecount;}// //约束 pageNo + parseInt(pagecount / 2)<totalPage 不能超过最大页数if( pageNo+parseInt(pagecount/2) >totalPage ){end=totalPage;start=totalPage-pagecount+1}}//返回开始和结尾的值return {start,end}},},
};
</script>