vue實現分頁組件

創建pagination.vue

/** 所需參數* total Number 總頁數* current Number 當前頁面下標* pageSize Number 頁面顯示條數* sizes Array 頁面條數容器數組* jump(index) function 重新獲取數據的方法* getPageSize(index) function 更改頁面顯示條數的方法*/ <style lang="less">@color:#1199F0;.page-wrapper{padding:20px 10px;ul{overflow: hidden;display: table;margin: 0 auto;height: 50px;list-style: none;li{float:left;}}.paging-size{height:30px;margin-right:20px;select{width:50px;height:30px;text-align:center;border:1px solid @color;}}.paging-item{height: 30px;line-height: 30px;margin: 3px;padding-left:12px;padding-right:12px;border-radius: 5px;font-size: 12px;color: #666;cursor: pointer;&:hover,&.current{color:#fff;background-color: @color;}}.paging-jump{margin-left:20px;margin-top:3px;height:30px;font-size:0;overflow: hidden;input[type="number"]{float: left;padding:0 5px;width:50px;height:28px;text-align:center;border:1px solid @color;}input[type="button"]{float: left;padding:0 12px;height:30px;border:none;color:#fff;background-color: @color;}}} </style> <template><div class="page-wrapper"><ul><li class="paging-size"><select @change="getPageSize"><option v-for="i in sizes" :value="i" :selected="i==pageSize">{{i}}</option></select></li><li class="paging-item" v-if="current!=1" @click='jump(1)'>首頁</li><li class="paging-item" v-if="current-1>0" @click='jump(current-1)'>上一頁</li><li class="paging-item" v-if="current-2>0" @click='jump(current-2)'>{{current-2}}</li><li class="paging-item" v-if="current-1>0" @click='jump(current-1)'>{{current-1}}</li><li class="paging-item current" @click='jump(current)'>{{current}}</li><li class="paging-item" v-if="total-current>1" @click='jump(current+1)'>{{current+1}}</li><li class="paging-item" v-if="total-current>2" @click='jump(current+2)'>{{current+2}}</li><li class="paging-item" v-if="total-current>1" @click='jump(current+1)'>下一頁</li><li class="paging-item" v-if="current!=total" @click='jump(total)'>尾頁</li><li class="paging-jump"><input type="number" v-model="jumpPage" :max="total" min="0"/><input type="button" value="跳轉" @click='jump(jumpPage)'/></li></ul></div> </template> <script>export default {data(){return {jumpPage:0}},props:{total:Number,current:Number,pageSize:Number,sizes:{type:Array,default:function(){return [15,25,35]}}},mounted(){if(this.total-this.current>1){this.jumpPage=this.current+1;}else{this.jumpPage=1;}},watch:{current(){if(this.total-this.current>1){this.jumpPage=this.current+1;}else{this.jumpPage=1;}}},methods:{jump(index){index=Number(index);if (this.current != index && index > 0 && index < this.total + 1) {this.$emit('jump', index);}},getPageSize(e){let pageSize=Number(e.target.value);this.$emit('getPageSize',pageSize);}}} </script>

index.vue中注冊

components:{'v-pagination':(resolve)=>{require(['components/pagination'],resolve);}}

index.vue中使用

<v-pagination:total="total":current="current":pageSize="pageSize"@getPageSize="getPageSize"@jump="jump"></v-pagination>

完整index.vue代碼

<template><div class="wrapper" v-swipeleft='left' v-swiperight='right'><v-pagination:total="total":current="current":pageSize="pageSize"@getPageSize="getPageSize"@jump="jump"></v-pagination></div> </template><script> export default {data () {return {total:20,current:4,pageSize:25}},methods:{jump(index){this.current=index;},getPageSize(pageSize){this.pageSize=pageSize;}},components:{'v-pagination':(resolve)=>{require(['components/pagination'],resolve);}} } </script> <style lang="less" scoped="scoped"> .wrapper{height:100%;width:100%; } </style>

總結

以上是生活随笔為你收集整理的vue实现分页组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。