Element-ui組件--pagination分頁

一般寫后台系統都會有很多的列表，有列表就相應的要用到分頁，根據項目中寫的幾個分頁寫一下我對分頁的理解，就當是學習筆記了。

這是Element-ui提供的完整的例子

<template>  <div class="block"> 
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[100, 200, 300, 400]"//這事下拉框可以選擇的，選擇一夜顯示幾條數據 :page-size="100" //這是當前煤業顯示的條數 layout="total, sizes, prev, pager, next, jumper" :total="400" //這個是總共有多少條數據，把后台獲取到的數據總數復制給total就可以了
> </el-pagination> </div> </template> <script> export default { methods: { handleSizeChange(val) { console.log(`每頁 ${val} 條`); }, handleCurrentChange(val) { console.log(`當前頁: ${val}`); } }, data() { return {
 total:'0', currentPage: 4 }; } } </script>

以下是我自己在項目中用到的分頁

<div style="float:right;margin-top:20px;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="pageSize"      //寫代碼時忘記把pageSize賦值給:page-size了，

 　　　　　　layout="total, sizes, prev, pager, next, jumper" 
　　　　　　:total="totalCount"> 
　　　　</el-pagination>
</div>

沒什么好的內容，就是給自己做個學習筆記吧