vue封装分页组件

1、使用elementUI中的el-pagination来封装分页组件

2、pagination.vue

 1 <template>
 2     <div class="pagination">
 3         <el-pagination  small  class="text-center"  @size-change="handleSizeChange" @current-change="handleCurrentChange"
 4                                 :current-page="page.page" :page-sizes="pageSizes" :page-size="page.limit"
 5                                 layout="total, sizes, prev, pager, next, jumper" :total="total">
 6         </el-pagination>
 7     </div>
 8 </template>
 9 
10 <script>
11 export default {
12     props: {
13         total: {
14             type: Number
15         } // 总条数
16     },
17     data() {
18         return {
19             pageSizes: [10, 20, 50, 100],
20             page: {
21                 page: 1,
22                 limit: 10
23             }
24         };
25     },
26     methods: {
27         // 每页条数变更
28         handleSizeChange(val) {
29             this.page.limit = val;
30             this.$emit('pageChange', this.page);
31         },
32         // 当前页码变更
33         handleCurrentChange(val) {
34             this.page.page = val;
35             this.$emit('pageChange', this.page);
36         }
37     }
38 }
39 </script>
40 <style>
41 .pagination {
42     margin: 20px 0;
43 }
44 </style>

3、使用创建的分页组件

1 <pagination :total="total" @pageChange="pageChange"></pagination>
2 
3 // 页码切换
4 pageChange(item) {
5     this.searchContent.page = item.page;
6     this.searchContent.limit = item.limit;
7     this.getList();
8 }