elementUI分页组件封装

在实际开发需求，产品需要的分页组件比较简单，只可以一页页地翻，就是为了防止用于直接翻看最后的数据（因为有一些历史数据数据量比较大，查看的意义不大，检索效率比较低也比较忙，因为不希望用户在翻页的时候可以随意翻看很久之前的数据）

因此需要根据实际需求进行分页组件封装

以下封装的分页组件，勉强够用，但是还不够完善，有需要的用于可以再次基础上继续完善

 1 <template>
 2   <el-pagination @size-change="handleSizeChange" background @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize" :total="total" :layout="layout">
 3     <slot>
 4       <ul class="el-pager">
 5         <li class="number active">{{currentPage}}</li>
 6         <li class="number" @click="handlePage(item)" v-for="item in pager">{{item}}</li>
 7       </ul>
 8     </slot>
 9   </el-pagination>
10 </template>
11 <script>
12 export default {
13   props: {
14     currentPage: {
15       type: [String, Number],
16       default: 1
17     },
18     total: {
19       type: [String, Number],
20       default: 0
21     },
22     pageSizes: {
23       type: Array,
24       default:function(){
25         return  [10,20,50,100,200,300,400]
26       }
27     },
28     pageSize: {
29       type: [String, Number],
30       default: 10
31     },
32     layout: {
33       type: String,
34       default: 'total,prev,slot,next,sizes'
35     }
36   },
37   data() {
38     return {
39     }
40   },
41   computed:{
42     pager:function(){
43       let pager=this.total/this.pageSize
44       pager=Math.ceil(pager)//总页数
45       if(pager<this.currentPage){
46         return []
47       }
48       let flag=this.currentPage+4
49       if(flag>pager){//大于总页数
50         let arr=[]
51         let total=pager-this.currentPage
52         for(let i=1;i<=total;i++){
53           arr.push(this.currentPage+i)
54         }
55         return arr
56       }else if(flag<=pager){
57         return [this.currentPage+1,this.currentPage+2,this.currentPage+3,this.currentPage+4]
58       }
59     }
60   },
61   methods: {
62     handlePage(page){
63       this.handleCurrentChange(page)
64     },
65     handleSizeChange(val) {
66       this.$emit('size-change', val)
67     },
68     handleCurrentChange(val) {
69       this.$emit('current-change', val)
70     }
71   }
72 }
73 
74 </script>
75 <style lang="scss" scoped>
76 .page {
77   text-align: center;
78   color: #409EFF;
79 }
80 
81 </style>

页面使用：

　　1、在main.js页面全局注册分页组件

// 全局注册分页组件
import newPagination from '@/components/newPagination'
Vue.component('newPagination', newPagination)

　　2、页面直接调用

 <new-pagination @current-change="handleCurrentChangeExp" :page-size=listQryExp.limit layout="total, prev, pager, next" :total=totalExp></new-pagination>