vue分页器得封装以及使用方法

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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<template>
  <div class="pageination_align"> 
   <div class="pageination" v-if="pageinationTotal">
       <div @click="pageUp(0)" class="pagination_page" :class="startDisabled?'disabled':''">首页</div>
        <div @click="pageUp(1)" class="pagination_page" :class="startDisabled?'disabled':''">上一页</div>
        <div class="pagination_page" :class="item==pageinationCurrentPage?'pagination_page_active':''" 
             v-for="item in pageinationLength" @click="jump(item)">
            {{item}}
        </div>
        <div @click="pageDown(1)" class="pagination_page" :class="endDisabled?'disabled':''">下一页</div>
        <div @click="pageDown(0)" class="pagination_page pagination_page_right" :class="endDisabled?'disabled':''">
            尾页
        </div>
    </div> 
  </div>
</template>
  <script>
export default {
  name: "Pagination",
  props: ["total", "size", "page", "changge", "isUrl"],
  data() {
    return {
      pageinationTotal: this.total, //总条目数
      pageinationSize: this.size ? this.size : 10, //每页显示条目个数
      pageinationLength: [],
      pageinationCurrentPage: this.page ? this.page : 1, //当前页数默认1
      pageinationPage: 0, //可分页数
      startDisabled: true, //是否可以点击首页上一页
      endDisabled: true, //是否可以点击尾页下一页
      pageChangge: this.changge, //修改方法
      pageIsUrl: this.isUrl ? true : false, //是否开启修改url
    };
  },
  methods: {
    jump(item) {
      this.pageinationCurrentPage = item;
      this.pagers();
      this.pageChangge(this.pageinationCurrentPage);
    }, //跳转页码
    pagers() {
      //可分页数
      this.pageinationPage = Math.ceil(
        this.pageinationTotal / this.pageinationSize
      );
      //url修改
      if (this.pageIsUrl) {
        this.$router.replace({
          path: this.$route.path,
          query: {
            page: this.pageinationCurrentPage,
          },
        });
      }
      //是否可以点击上一页首页
      this.startDisabled = this.pageinationCurrentPage != 1 ? false : true;
      //是否可以点击下一页尾页

      this.endDisabled =
        this.pageinationCurrentPage != this.pageinationPage ? false : true;
      if (this.pageinationPage == 0) this.endDisabled = true;
      //重置
      this.pageinationLength = [];
      //开始页码1
      let start =
        this.pageinationCurrentPage - 4 > 1
          ? this.pageinationCurrentPage - 4
          : 1;
      //当前页码减去开始页码得到差
      let interval = this.pageinationCurrentPage - start;
      //最多9个页码，总页码减去interval 得到end要显示的数量+
      let end =
        9 - interval < this.pageinationPage
          ? 9 - interval
          : this.pageinationPage;
      //最末页码减开始页码小于8
      if (end - start != 8) {
        //最末页码加上与不足9页的数量，数量不得大于总页数
        end =
          end + (8 - (end - start)) < this.pageinationPage
            ? end + (8 - (end - start))
            : this.pageinationPage;
        //最末页码加上但是还不够9页，进行开始页码追加，开始页码不得小于1
        if (end - start != 8) {
          start = end - 8 > 1 ? end - 8 : 1;
        }
      }
      for (let i = start; i <= end; i++) {
        this.pageinationLength.push(i);
      }
    }, //计算分页显示的数字
    pageUp(state) {
      if (this.startDisabled) return;
      if (this.pageinationCurrentPage - 1 != 0 && state == 1) {
        this.jump(this.pageinationCurrentPage - 1);
      } else {
        this.jump(1);
      }
    }, //上一页跟首页 state=1是上一页 state=0是首页
    pageDown(state) {
      if (this.endDisabled) return;
      if (
        this.pageinationCurrentPage + 1 != this.pageinationPage &&
        state == 1
      ) {
        this.jump(this.pageinationCurrentPage + 1);
      } else {
        this.jump(this.pageinationPage);
      }
    }, // state=1是下一页 state=0是尾页
    pageCurrentChange() {
      this.pageChangge(this.pageinationCurrentPage);
      this.pagers();
    },
  },
  created() {
    this.pageCurrentChange();
  },
  watch: {
    total: function (val, oldVal) {
      this.pageinationTotal = val;
      this.pagers();
    },
    page: function (val, oldVal) {
      this.pageinationCurrentPage = val;
      this.pagers();
    },
  },
};
</script>
<style lang="scss" scoped>
        .pageination_align {
            text-align: center
        }

        .pageination {
            color: #48576a;
            font-size: 12px;
            display: inline-block;
            user-select: none;
        }

        .pagination_page {
            padding: 0 4px;
            border: 1px solid #d1dbe5;
            border-right: 0;
            background: #fff;
            font-size: 13px;
            min-width: 28px;
            height: 28px;
            line-height: 28px;
            cursor: pointer;
            box-sizing: border-box;
            text-align: center;
            float: left;
        }

        .pagination_page_right {
            border-right: 1px solid #d1dbe5;
        }

        .pagination_page:hover {
            color: #20a0ff;
        }

        .disabled {
            color: #e4e4e4 !important;
            background-color: #fff;
            cursor: not-allowed;
        }

        .pagination_page_active {
            border-color: #20a0ff;
            background-color: #20a0ff;
            color: #fff !important;;
            cursor: default;
        }
 </style>

1
2
3
4
5
6
7
   <Pagination
      :total="Total"
      :size="model.size"
      :page="model.page"
      :changge="pageFn"
    ></Pagination>

1
2
3
4
5
 model: {
        size: 10, //每页显示条目个数不传默认10
        page: 1, //当前页码
      },

1
2
3
4
5
6
7
8
9
 methods:{
   //页码切换执行方法
   pageFn(val){
          this.model.page=val;//val就是当切换页码时变化之后的当前页码数
          console.log(val);
          //  在这可以调用获取总数据的方法，目的就是让页码与数据响应起来，Total就是获取总数据的条数
       }
   }