vue自定義分頁組件---切圖網

vue2.5自定義分頁組件 Pagination.vue，可設置每頁顯示條數，帶跳轉框直接跳轉到相應頁面，親測有用。目前很多框架自帶有分頁組件比如elementUI，不過在面對一個拿到PSD稿，然后重新切圖，重新VUE開發的項目來說，自定義分頁組件才是應萬變的最佳打開方式。

html

<template> <div class="pagination" v-if="totalPage>1"> <span v-if="!small" class="total">共{{totalCount}}條記錄<!-- 第{{currentPage}}/{{totalPage}}頁--></span> <ul class="paging"> <li class="prev" :class="{'disabled':currentPage<=1}" @click="currentPage<=1?'':turn(currentPage-1)"><i class="iconfont icon-chevron-left"></i></li> <li v-for="i in showPageBtn" class="num" :class="{'active':i==currentPage}" v-if="i>0" @click="turn(i)">{{i}}</li> <li v-else-if="i==='-'" class="num iconfont icon-more" :class="{'icon-d-arrow-left':toPrev}" @click="turn(currentPage-1)" @mouseenter="toPrev=true" @mouseleave="toPrev=false"></li> <li v-else-if="i==='+'" class="num iconfont icon-more" :class="{'icon-d-arrow-right':toNext}" @click="turn(currentPage+1)" @mouseenter="toNext=true" @mouseleave="toNext=false"></li> <li class="next" :class="{'disabled':currentPage>=totalPage}" @click="currentPage>=totalPage?'':turn(currentPage+1)"><i class="iconfont icon-chevron-right"></i></li> </ul> <select v-if="!small" v-model="limitNum" @change="turn(currentPage)"> <option v-for="item in limitNums" :value="item">{{item}}條/頁</option> </select> <span v-if="all" class="jump">前往<input type="number" autocomplete="off" min="1" :max="totalPage" v-model="goPage" @keyup.enter="turn(goPage)">頁</span> </div> </template>

js

<script> export default { name:'MyPagination', props: { currentPage: {//當前頁 type: Number, default: 1, }, limit:{//每頁顯示條數 type: Number, default: 10, }, totalCount:{//總條數 type: Number, required: true }, small:{ type:Boolean, default: false, }, all:{ type:Boolean, default: false, } }, data() { return { goPage:'', limitNum:'', limitNums:[5,10,15,20,25,30], toPrev:false, toNext:false, } }, created: function () { this.initLimitNums(); }, computed: { totalPage(){ return Math.ceil(this.totalCount / this.limit) }, showPageBtn() { let pageNum = Number(this.totalPage), index = Number(this.currentPage), arr = []; if (pageNum <= 9) { for(let i = 1; i <= pageNum; i++) { arr.push(i) } return arr } if (index < 5) return [1,2,3,4,5,6,7,'+',pageNum] if (index >= pageNum -1) return [1,2,'-', pageNum -5,pageNum -4,pageNum -3, pageNum -2, pageNum -1, pageNum] if (index === pageNum -2) return [1,2,'-', pageNum -5,pageNum -4,pageNum-3, pageNum-2, pageNum-1, pageNum] return [1,'-', index-2,index-1, index, index + 1,index + 2, '+', pageNum] } }, methods: { initLimitNums() { this.limitNum=this.limit; //if (this.limitNums.indexOf(this.limit) == -1) { if (!this.limitNums.includes(this.limit)) { this.limitNums.push(this.limit); this.limitNums.sort(function (a, b) { return a-b; }); } }, //翻頁，顯示條數變化 turn(page) { let i = parseInt(Number(page)); if(i<1){ i=1; }else if(i>this.totalPage){ i=this.totalPage; } if(this.limitNum!==this.limit&&this.limitNum!==''){//每頁顯示條數改變 let pages=Math.ceil(this.totalCount / this.limitNum); if(page>pages){ i=pages; } this.$emit('update:limit', this.limitNum); } this.$emit('update:currentPage', i); this.$emit('turn'); } } } </script> 

<!–測試-分頁–>

<template> <div class="box"> ... <my-pagination :currentPage.sync="currentPage" :limit.sync="limit" :totalCount="totalCount" @turn="getTableData"></my-pagination> </div> </template> 

JS

<script> import MyPagination from './Pagination' export default { components: { MyPagination }, data() { return { currentPage: 1,//當前頁碼 limit: 10,//每頁顯示條數 totalCount:0,//總頁數 } }, created: function () { this.getTableData(); }, methods: { getTableData() { let params = this.$qs.stringify({ 'pageSize': this.limit, 'pageNum': this.currentPage }); this.$http.post('/api/...', params).then(res => { this.totalCount = res.data.totalCount; }); } } } </script>