vue封裝分頁組件

一、使用elementUI中的el-pagination來封裝分頁組件

二、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>

三、使用建立的分頁組件

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 }