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>