项目经验------1分页器的组件封装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
//封装为全局组件
<template>
    <div class="pagination">
      <!--pageNo为当前页，为1的时候上一页就禁止  -->
      <button :disabled="pageNo==1" @click="$emit('getPageNo',pageNo-1)">上一页</button>
      <!-- 这是第一页，当显示页面范围的start值大于1时显示，等于小于1不显示 -->
      <button v-show="startNumAndEndNum.start>1" @click="$emit('getPageNo',1)" :class="{active:pageNo==1}">1</button>
      <!-- 省略号显示页面范围的start值大于2时显示 -->
      <button v-show="startNumAndEndNum.start>2">···</button>
      <!-- 循环数字（v-for支持循环数字）这里要配合显示条件v-show，当page页面大于显示页面范围时才能显示，就是恒定显示范围内的页面其他不显示 -->
      <button v-for="(page,index) in startNumAndEndNum.end" :class="{active:pageNo==page}" @click="$emit('getPageNo',page)" :key="index" v-show="page>=startNumAndEndNum.start">{{page}}</button>
      <button v-show="startNumAndEndNum.end<totalPage-1">···</button>
      <button v-show="startNumAndEndNum.end<totalPage" @click="$emit('getPageNo',totalPage)" :class="{active:pageNo==totalPage}">{{totalPage}}</button>
      <button :disabled="pageNo==totalPage" @click="$emit('getPageNo',pageNo+1)">下一页</button>
      <button style="margin-left: 30px">共{{total}}条</button>
    </div>
  </template>
  
  <script>
    export default {
      name: "Pagination",
      props:['pageNo','pageSize','total','continues'],
      computed:{
        //总页数
        totalPage(){
          //总条数/每页条数
          return Math.ceil(this.total/this.pageSize);
        },

        startNumAndEndNum(){
          const {continues,pageNo,totalPage}=this;
          //计算连续页数码
          let start = 0,end = 0;
          //不正常页码数；例如数据小于要显示页面条数时,
          if(continues>totalPage){
            start=1;
            end=totalPage;
          } else {
            start=pageNo-parseInt(continues/2);
            end=pageNo+parseInt(continues/2);
            if(start<1){
              start=1;
              end=continues;
            }
            if(end>totalPage){
              end=totalPage;
              start=totalPage-continues+1;
            }
          }
          return {start,end};
        },
      },
    }
  </script>
  
  <style lang="less" scoped>
    .pagination {
        text-align: center;
      button {
        margin: 0 5px;
        background-color: #f4f4f5;
        color: #606266;
        outline: none;
        border-radius: 2px;
        padding: 0 4px;
        vertical-align: top;
        display: inline-block;
        font-size: 13px;
        min-width: 35.5px;
        height: 28px;
        line-height: 28px;
        cursor: pointer;
        box-sizing: border-box;
        text-align: center;
        border: 0;
  
        &[disabled] {
          color: #c0c4cc;
          cursor: not-allowed;
        }
  
        &.active {
          cursor: not-allowed;
          background-color: #409eff;
          color: #fff;
        }
      }
    }
  </style>

1
2
import Pagination from '@/components/Pagination';
Vue.component(Pagination.name,Pagination);

1
2
3
4
5
6
7
8
9
10
11
12
13
//在页面结构，不用import引进直接使用及也可以了

   <Pagination :pageNo='queryParams.pageNo'
           :pageSize="queryParams.pageSize"
            :total="total" :continues="5"
            @getPageNo="pageNoList"
             />


//子组件向父组件传值
  pageNoList(data){
       this.queryParams.pageNo=data
      },