?整篇分兩個部分：

思路部分：講解怎么實現分頁器組件【大把時間看-建議】

后面部分：按照步驟，直接引入組件【沒有時間看-建議】

思路：基于連續頁碼進行判斷

• 需要添加分頁器的組件（Search組件）中

<!-- 分頁器 --><Pagination:pageNo="searchParams.pageNo":pageSize="searchParams.pageSize":total="total":continues="5"@getPageNo="getPageNo"/>

在分頁器組件上傳遞【當前頁碼pageNo】、【每頁展示的數據pageSize】、【總的數據total】、【連續的頁碼（重要）】，定義一個【自定義事件getPageNo】把用戶點擊的【當前頁碼pageNo】傳遞回來，并進行數據請求

methods中定義函數接受分頁器傳回來的【當前頁pageNo】

分頁器，分成三部分? ------【如下圖】

• 分頁器組件（Pagination）中

????????1、通過props取得 Search組件傳遞的參數

props: ["pageNo", "pageSize", "total", "continues"],

????????2、在分頁器組件計算屬性computed中計算總共多少頁/最后一頁 -?this.total / this.pageSize

【記得向上取整Math.ceil()，例：當總的數據total=30，每頁的數據pageSize=3，那么10頁剛剛好展示完畢，如果每頁的數據pageSize=4，有7頁展示4條數據，還有2條需要下一頁展示，所以進行取整，Math.ceil(30/4)=8】

? ? ? ? 3、在分頁器組件計算屬性computed中計算連續頁碼【至少5頁】的起始數字start、結束數字end【當前頁pageNo在連續頁碼中】

• 情況判斷一：連續的頁碼 > 總的頁數 【start=1，end=總的頁數】
• 情況判斷二：連續的頁碼 < 總的頁數 【計算 start = pageNo - parseInt(continues / 2)、end = pageNo + parseInt(continues / 2);】
  • 分情況一：start數字出現0 | 負數 【continues=5，pageNo=1、2的時候】
  • 分情況二：end數字大于總頁碼 【continues=5，totalPage=30，pageNo=29、30的時候】
• 記得：最后把 start、end返回

• 上下一頁 、第一頁、最后一頁的判斷

  • 上一頁：如果當前頁pageNo=1，就不顯示上一頁按鈕，綁定點擊事件，點擊觸發getPageNo自定義事件，把當前頁pageNo-1當參數傳遞回search組件，請求上一頁的數據
  • 第一頁：如果連續頁碼的起始數字start>1，就顯示前面定義好的第一頁；小于的話，顯示連續頁碼中的第一頁按鈕。點擊事件同上，由于可能處理選中狀態，所以綁定一個類【已經在css中定義好的】，添加選中顏色，當然需要判斷是否是選中的頁
  • 省略...小點：當連續頁碼的start=3時，顯示，也就表示，他們之間還有一頁
  • 連續頁碼：通過v-for遍歷數字，遍歷連續頁碼中end，并判斷其中的元素page>start，才顯示【因為傳過來的連續頁碼為5，所以在分頁器中連續頁碼出現最大的就是end-start=5，去掉start之前的頁碼，才能使連續頁碼為5】，其他同上
  • 省略...小點 | 最后一頁 | 下一頁：計算同上【totalPage是上面已經算完的總頁數|最后一頁】

• 靜態組件

<template><div class="pagination"><button>1</button><button>上一頁</button><button>···</button><button>3</button><button>4</button><button>5</button><button>6</button><button>7</button><button>···</button><button>9</button><button>上一頁</button><button style="margin-left: 30px">共 60 條</button></div> </template><script>export default {name: "Pagination",} </script><style lang="less" scoped>.pagination {button {margin: 0 5px;background-color: #f4f4f5;color: #606266;outline: none;border-radius: 2px;padding: 0 4px;vertical-align: top;display: inline-block;font-size: 13px;min-width: 35.5px;height: 28px;line-height: 28px;cursor: pointer;box-sizing: border-box;text-align: center;border: 0;&[disabled] {color: #c0c4cc;cursor: not-allowed;}&.active {cursor: not-allowed;background-color: #409eff;color: #fff;}}} </style>

1、 注冊組件

注意：一般使用分頁器組件的地方有很多，所以我把他注冊為了全局組件

• 在vue腳手架的main.js中配置

?2、掛載組件

• 掛載并傳參

【當前頁碼pageNo】、【每頁展示的數據pageSize】、【總的數據total】、【連續的頁碼（重要）】，定義一個【自定義事件getPageNo】把用戶點擊的【當前頁碼pageNo】傳遞回來，并進行數據請求

• 自定義事件接受參數當前頁，再次發請求【根據你自己的來】

?3、分頁器組件代碼

<template><div class="pagination"><button :disabled="pageNo == 1" @click="$emit('getPageNo', pageNo - 1)">上一頁</button><buttonv-if="startNumAndEndNum.start > 1"@click="$emit('getPageNo', 1)":class="{ active: pageNo == 1 }">1</button><button v-if="startNumAndEndNum.start > 2">···</button><!-- 連續的頁碼 --><buttonv-for="(page, index) in startNumAndEndNum.end":key="index"v-if="page >= startNumAndEndNum.start"@click="$emit('getPageNo', page)":class="{ active: pageNo == page }">{{ page }}</button><button v-if="startNumAndEndNum.end < totalPage - 1">···</button><buttonv-if="startNumAndEndNum.end < totalPage"@click="$emit('getPageNo', totalPage)":class="{ active: pageNo == totalPage }">{{ totalPage }}</button><button :disabled="pageNo == totalPage">下一頁</button><button style="margin-left: 30px">共 {{ total }} 條</button></div> </template><script> export default {name: "Pagination",props: ["pageNo", "pageSize", "total", "continues"],computed: {// *計算總共多少頁,也就是最后一頁（需要向上取整Math.ceil）totalPage() {return Math.ceil(this.total / this.pageSize);},// *計算出連續頁碼的起始數字與結束的數字【連續的頁碼數字：至少是5】startNumAndEndNum() {const { continues, pageNo, totalPage } = this; // 解構了// 先定義兩個變量存儲起始數字與結束數字let start = 0,end = 0;// *連續頁碼數字是5【至少5頁】，如果出現不正常現象【不夠5頁，即總頁數 < 連續頁碼5】if (continues > totalPage) {start = 1;end = totalPage;} else {// 正常現象【連續的頁碼5，但是你的總頁數一定是大于5的】 parseInt()返回一個十進制的整數【一個數字的參數可同Math.floor】start = pageNo - parseInt(continues / 2);end = pageNo + parseInt(continues / 2);// 把出現不正常的現象【start數字出現0|負數，continues=5，pageNo=1、2的時候】if (start < 1) {start = 1;end = continues;}// 把出現不正常的現象【end數字大于總頁碼，continues=5，totalPage=30，pageNo=29、30的時候】if (end > totalPage) {start = totalPage - continues + 1;end = totalPage;}}return { start, end };},}, }; </script><style lang="less" scoped> .pagination {text-align: center;button {margin: 0 5px;background-color: #f4f4f5;color: #606266;outline: none;border-radius: 2px;padding: 0 4px;vertical-align: top;display: inline-block;font-size: 13px;min-width: 35.5px;height: 28px;line-height: 28px;cursor: pointer;box-sizing: border-box;text-align: center;border: 0;// 選擇帶有disabled屬性的所有元素&[disabled] {color: #c0c4cc;cursor: not-allowed;}&.active {cursor: not-allowed;background-color: #409eff;color: #fff;}} } </style>

之前手寫的python-django框架的分頁器 ：

django數據庫版分頁實現_打不著的大喇叭的博客-CSDN博客_django 分頁 數據庫

總結

以上是生活随笔為你收集整理的超级详细：一个漂亮的Vue分页器组件的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。