Pagination 分页封装

1、分页子组件

 1 <template>
 2   <div style="text-align: right; padding-right: 50px; padding-top: 15px">
 3     <el-button
 4       size="mini"
 5       @click="currentChange(currentPage)"
 6       style="vertical-align: sub"
 7       >刷新</el-button
 8     >
 9     <el-pagination
10       v-show="total > size"
11       @size-change="sizeChange"
12       @current-change="currentChange"
13       :current-page="currentPage"
14       :page-sizes="sizes"
15       :page-size="size"
16       :layout="layout || pageLayout"
17       :total="total"
18     >
19     </el-pagination>
20   </div>
21 </template>
22 
23 <script>
24 export default {
25   data() {
26     return {
27       isSizeChange: false,
28       sizes: [10, 20, 30, 50, 100], //选择每页显示个数的选项
29       size: 20, //默认每页显示多少条数据
30       currentPage: 1, //当前页数
31       startIndex: 0,
32       pageLayout: "total, sizes, prev, pager, next, jumper", //组件布局
33     };
34   },
35   props: ["total", "layout"],
36   methods: {
37     /* 
38     修改页码大小
39     */
40     sizeChange(size) {
41       this.size = size;
42       var page = this.startIndex / size;
43       page = page + 1 - (page % 1);
44       this.currentPage = page == 0 ? 1 : page;
45       if (this.currentPage > 1) {
46         this.startIndex = (this.currentPage - 1) * this.size;
47       } else {
48         this.startIndex = 0;
49       }
50       this.isSizeChange = true;
51       this.$emit("on-change", size, this.currentPage);
52     },
53     /* 
54     当前页变动
55     */
56     currentChange(page) {
57       var elTable = document.getElementsByClassName("el-table__body-wrapper");
58       if (elTable.length) {
59         elTable[0].scrollTop = 0;
60       }
61       document.getElementById("app-main").scrollTop = 0;
62       this.currentPage = page;
63       this.startIndex = (page - 1) * this.size;
64       if (!this.isSizeChange) {
65         this.$emit("on-change", this.size, this.currentPage);
66       }
67       this.isSizeChange = false;
68     },
69   },
70 };
71 </script>

2、父页面

1 <!-- 
2     分页 
3     queryList 获取table表单数据
4 -->
5 <pagination ref="page" @on-change="queryList" :total="result.total"></pagination>

3、获取table表单数据

1 queryList() {
2     this.formData.curPage = this.$refs.page.currentPage; //当前页码
3     this.formData.pageSize = this.$refs.page.size;//每页大小
4 
5     // 调用查询接口
6     this.API.system.currencyList(this.formData).then(res => {
7     this.result = res.content;
8     });
9 }

Pagination 分页 封装

Pagination 分页封装