vue 分頁組件
阿新 • • 發佈:2018-08-30
pos ice let ini fun then 樣式 del sele
Pagination.vue
<template> <div class="pagination"> <span 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-prev"></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" @click="turn(currentPage-1)">...</li> <li v-else-if="i===‘+‘" class="num" @click="turn(currentPage+1)">...</li> <li class="next" :class="{‘disabled‘:currentPage>=totalPage}" @click="currentPage>=totalPage?‘‘:turn(currentPage+1)"><i class="iconfont icon-next"></i></li> </ul> <select v-model="limitNum" @change="turn(currentPage)"> <option v-for="item in limitNums" :value="item">{{item}}條/頁</option> </select> <span class="jump">前往<input type="number" autocomplete="off" min="1" max="4" v-model="goPage" @keyup.enter="turn(goPage)">頁</span> </div> </template> <script> export default { props: [ ‘currentPage‘,//當前頁 ‘limit‘,//每頁顯示條數 ‘totalCount‘,//總條數 ], data() { return { goPage:‘‘, limitNum:‘‘, limitNums:[5,10,15,20,25,30], } }, mounted: function () { this.$nextTick(function () { }) }, watch: { limit:function () {//limit有值後才執行,否則會出現空的情況,子組件和父組件是同時渲染,vue的數據是響應式的,mounted時還沒拿到數據 this.limitNum=this.limit; 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() { if (this.limitNums.indexOf(this.limitNum) == -1) { this.limitNums.push(this.limitNum); 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){//每頁顯示條數改變 let pages=Math.ceil(this.totalCount / this.limitNum); if(page>pages){ i=pages; } } this.$emit(‘turn‘, i,this.limitNum); } } } </script>
<!--測試-分頁--> <template> <div class="box"> <div class="table-warp mb20"> <table class="table table-striped"> <thead> <tr> <th>序號</th> <th>部門</th> <th>事項名稱</th> <th>綜合評分</th> </tr> </thead> <tbody v-if="!loadFlag&&tableList.length>0"> <tr v-for="item in tableList"> <td>{{item.xh}}</td> <td>{{item.slbm}}</td> <td>{{item.fwmc}}</td> <td><span class="num">{{item.zhpf}}</span></td> </tr> </tbody> </table> <div v-if="loadFlag" class="loading"><i class="iconfont icon-loading"></i> Loading...</div> <div v-if="!loadFlag&&tableList.length<1" class="no-data">暫無數據!</div> </div> <pagination class="fn-tc" :currentPage="tableData.pageNum" :limit="tableData.pageSize" :totalCount="tableData.total" @turn="getTableList"></pagination> </div> </template> <script> import Pagination from ‘@/components/common/Pagination‘ //分頁 export default { components: { Pagination }, data() { return { tableData: [], tableList: [], pageNum:1,//當前頁碼 pageSize:2,//每頁顯示評價數 loadFlag:true, } }, created: function () { this.getTableList(); }, methods: { getTableList(currentPage=this.pageNum,limitNum=this.pageSize) { let params = this.$qs.stringify({ ‘pageSize‘:limitNum, ‘pageNum‘:currentPage }); this.loadFlag=true; this.$http.post(‘/api/analysis/serviceQuality‘, params).then(res => { this.loadFlag=false; this.tableData = res.data; this.tableList=res.data.list; }); } } } </script>
//分頁樣式 .pagination{ line-height: 30px; user-select: none; .total{ display: inline-block; } .paging{ display: inline-block; margin: 0 20px; li{ display: inline-block; min-width: 32px; margin: 0 2px; padding: 0 4px; border: 1px solid $bd-color; text-align: center; cursor: pointer; &:not(.disabled):not(.active):hover{ border-color: $them-color; color: $them-color; } &.active{ color: #fff; background-color: $them-color; cursor: default; } &.disabled{ color: $bd-color; cursor: not-allowed; } } } input, select{ margin: 0 4px; padding: 4px 2px; border: 1px solid #ddd; text-align: center; } .jump{ display: inline-block; } }
效果如下圖:
vue 分頁組件