Vue 手写一个分页组件

今天遇到一个需求是在分页组件中的每页显示个数选择器加个所有的选择。系统分页组件用的是 element ui pagination，当本人在 page-sizes 属性中添加‘所有’进去。出现的内容如下：

这。。。怎么行。于是自己动手写了一个。

1、创建 wtecthtec-pagenation.vue在components 目录下

2、设置 props 参数，也就是分页组件需要配置的参数，：

/* 需要参数 ：
pageSizes：对象数组，显示每页显示个数选择器  [{value:100,name:100}]
pageSize： 当前选择的每页显示个数值
total： 总条数
pageNums： 总页数
*/
props:{
   pageInfo:{
      type: Object,
    },
},

3、渲染页面：

<template>
    <div class="page">
      <span class="total-text"> 共 {{ pageInfo.total }} 条 </span>

      <select class="form-control" @change="handlePageSize"  v-model="pageInfo.pageSize">
        <option v-for="(sItem,index) in pageInfo.pageSizes" :value="sItem.value"   :key="index"  >
          {{  sItem.name | filerPageSizes }}
        </option>
      </select>
      <span :class="[currentPage === 1?'no-activite' : 'can-activite','operation'] " @click="handleCurrenPage('up')" >上一页 </span>
          <span v-show="startPage > 1 && pageInfo.pageNums >= 7" > ... </span>
          <span  :class="[currentPage===pageVal ? 'activited':'can-activite']"
                 v-for="pageVal in getShowPages()" :key="pageVal" @click="handleCurrenPage(pageVal)"> {{ pageVal }} </span>
          <span v-show="endPage < pageInfo.pageNums"> ... </span>
      <span :class="[currentPage === pageInfo.pageNums?'no-activite' : 'can-activite','operation'] " @click="handleCurrenPage('next')">下一页</span>
    </div>
</template>

4、添加逻辑事件：

数据过滤器

/* 数据过滤器，当pageSizes[n].name 为数字时就显示 name + 条/页 */
filters:{
        filerPageSizes(item){
          if (Number.isInteger(item)) {
             return item +'条/页'
          }else {
            return item
          }
        }
      },

触发 每页显示个数选择器 事件

  // 触发 每页显示个数选择器 事件
        handlePageSize(type){
           //  console.log('handlePageSize: ',this.pageInfo.pageSize)
           //   this.getPageNums()
            this.currentPage = 1
// 将事件暴露出去，在使用组件时，可以自定义handlePageSize事件
            this.$emit('handlePageSize', this.pageInfo.pageSize);
        },

触发当前页码点击

 // 触发当前页码点击
        handleCurrenPage(val){
           // console.log('handleCurrenPage:',val)
           //上一页处理
           if (val === 'up') {
             if (this.currentPage === 1) return
             this.currentPage =   this.currentPage - 1
           }
          //下一页处理
           else  if (val === 'next') {
            if (this.currentPage === this.pageInfo.pageNums) return
             this.currentPage =   this.currentPage+ 1
          }  else {
             if ( this.currentPage === val) return
             this.currentPage = val
           }
          this.$emit('handleCurrenPage', this.currentPage);
        },

// 计算当前显示的页码

 // 计算当前显示的页码
        getShowPages(){
           let showPages = []
           let start = this.currentPage > 3? this.currentPage - 3 : 1
            let end = this.pageInfo.pageNums > 7? this.currentPage + 3:this.pageInfo.pageNums
            if(this.pageInfo.pageNums <= 7) {
                 start = 1
                 end = this.pageInfo.pageNums
            } else {
                if (start === 1) end = 7
                if (end >  this.pageInfo.pageNums){
                  start = (start - (end - this.pageInfo.pageNums) ) <= 0? 1 :  (start - (end - this.pageInfo.pageNums) )
                  end = this.pageInfo.pageNums
                }
            }
            this.startPage =  start
            this.endPage = end
            for (start; start <= end; start++) {
              showPages.push(start)
            }
            return showPages
        }

// 计算共有多少页

getPageNums(){
            let  nums = parseInt( this.pageInfo.total / this.pageInfo.pageSize)
            if (this.pageInfo.total % this.pageInfo.pageSize > 0){
              nums += 1
            }
            this.pageInfo.pageNums = nums
      
      //    console.log('getPageNums :', this.pageSize)

        },

4、在App.vue调用

引用：

import  PageCom from './wtecthtec-pagenation'

注册组件

  components:{
    PageCom
  },

加载

<PageCom  :page-info="pageInfo" @handlePageSize="handlePageSizeVal"  @handleCurrenPage="handleCurrenPageVal"></PageCom>

参数

pageInfo:{
         pageSizes:[
           {value: 10,name: 10},
           {value: 20,name: 20},
           {value: 30,name: 30},
         ],
       pageSize: 10,
       total:100,
       pageNums:10
     }

事件

 handlePageSizeVal(val){
    console.log(`当前选条/页 ${val}`)
  },
  handleCurrenPageVal(val){
     console.log(`当前页 ${val}`)
  }

运行显示：

源码