目錄

子組件：

具體頁面的應用：

---

子組件：

template部分

<template><div class="page-wrapper clearfix"><div class="page-info fl"><span class="item-count h50">總共<span>{{totals}}</span>條，</span><span class="h50"><span>{{totalPages}}</span>頁</span></div><div class="page-tab fl clearfix"><buttonclass="fl h50 cursor":class="{canNot:currentPage==1}"@click="firstPage":disabled="preDisabled">首頁</button><buttonclass="fl h50 cursor":class="{canNot:currentPage==1}"@click="prePage":disabled="preDisabled">上一頁</button><ul class="fl"><liv-for="(item,index) in itemArr":key="index"class="cursor"@click="changePage(item)":class="{activePage:currentPage=== item}">{{item}}</li></ul><buttonclass="fl h50 cursor"@click="nextPage":class="{canNot:currentPage==totalPages}":disabled="nextDisabled">下一頁</button><buttonclass="fl h50 cursor":class="{canNot:currentPage==totalPages}":disabled="nextDisabled"@click="lastPage">尾頁</button></div><div class="items-choose fl clearfix"><span class="fl h50">每頁</span><div class="items-show fl" @click="handleChooseNumClick"><input v-model="pageSize" class="chooseNum" @blur="blur" readonly /><div class="per-page-items"><!-- <input type="text" class="input-item-num"> --><ul class="items-num" v-show="itemsShow"><liv-for="(item,index) in pageSizeSettings":key="index"@click.stop="chooseNum(item)">{{item}}</li></ul></div></div></div></div> </template>

script部分：? ? ? 選項式API

<script> export default {name: "VuePagination",props: {pageSize: {// 每頁顯示數量default: 0,type: Number,},totals: {// 總數default: 0,type: Number,},tab: {type: Boolean,default: false,},pageSizeSettings: {// 配置下拉 選pageSizetype: Array,default() {return [10, 20, 50, 100];},},},data() {return {itemsShow: false, // 控制每頁條數下拉框itemArr: [], // 顯示頁數,nextDisabled: null,preDisabled: "disabled",totalPages: 1, // 默認頁數currentPage: 1,size: this.pageSize, // 獲取每頁數量};},computed: {pageNum() {// 由于父組件傳遞過來的屬性 子組件的鉤子里面不能直接使用 用計算屬性代替接收let a = this.pageSize;return a;},pageItems() {let b = this.totals;return b;},},created() {this.pages();},methods: {chooseNum(item) {// 改變pageSizethis.itemsShow = false;this.$emit("size-change", {pageSize: item,});},handleChooseNumClick() {this.itemsShow = !this.itemsShow;},blur() {var that = this;setTimeout(function () {that.itemsShow = false;}, 200);},changePage(page) {// 切換頁數this.currentPage = page;this.pages();},nextPage() {// 下一頁if (this.currentPage <= this.totalPages - 1) {this.currentPage++;}},prePage() {// 上一頁if (this.currentPage > 1) {this.currentPage--;}},firstPage() {// 首頁this.currentPage = 1;},lastPage() {// 尾頁this.currentPage = this.totalPages;},pages() {// 頁數改變的邏輯this.itemArr = []; // 每次改變得清空數組this.totalPages = Math.ceil(this.pageItems / this.pageNum);this.preDisabled = this.currentPage === 1 ? "disabled" : null;this.nextDisabled =this.currentPage === this.totalPages ? "disabled" : null;let start = this.currentPage - 2 > 1 ? this.currentPage - 2 : 1;let end =this.currentPage > 3? this.totalPages - this.currentPage >= 2? this.currentPage + 2: this.totalPages: 5;start = this.totalPages - this.currentPage >= 2 ? start : end - 4;if (this.totalPages <= 5) {start = 1;end = this.totalPages;}for (let i = start; i <= end; i++) {this.itemArr.push(i);}},},watch: {pageNum() {// 每頁數量變化后傳遞出 pageSize 重新請求數據this.currentPage = 1; // 改變每頁數據 頁碼回到初始值this.pages();this.$emit("size-change", {pageSize: this.pageNum,});},currentPage() {// 當前頁數變化后 傳遞出當前頁碼 重新請求數據this.pages();this.$emit("current-change", {pageSize: this.pageNum,currentPage: this.currentPage,});},totals() {// 數據是異步加載的 組件剛開始totals是默認的是渲染不了的this.pages();},tab() {// 點擊切換條件篩選 重置currentPagethis.currentPage = 1;},}, }; </script>

css樣式?

<style> * {padding: 0;margin: 0; }ul, li {list-style: none; }.clearfix:after {content: ".";height: 0;display: block;visibility: hidden;clear: both;overflow: hidden; }.cursor {cursor: pointer; }.clearfix {zoom: 1; }.page-wrapper .fl {float: left; } .page-wrapper {font-size: 14px;color: #5e6470; } .h50 {display: inline-block;height: 30px;line-height: 30px;padding: 0 12px;border: 1px solid #eaedf1; }.page-wrapper .page-tab li {float: left;width: 30px;height: 30px;text-align: center;line-height: 30px;border: 1px solid #eaedf1;box-sizing: border-box; }.page-wrapper .page-info {margin-right: 6px; }.page-wrapper .page-info .h50 {border: none;padding: 0; }.items-choose .h50 {padding: 0;border: none 0;border-top: 1px solid #eaedf1;border-bottom: 1px solid #eaedf1;box-sizing: border-box;padding: 0 6px; }.items-choose .items-show {height: 30px;width: 74px;position: relative;box-sizing: border-box;border: 1px solid #eaedf1;position: relative; } .items-choose .items-show input {height: 100%;width: 100%;text-align: center; } .items-choose .items-show:after {content: "";position: absolute;height: 0;border: 4px solid transparent;border-top: 6px solid #c4ccc5;top: 50%;right: 10px;transform: translate3d(-50, -50, 0);cursor: pointer; }.items-choose .items-num {width: 100%;position: absolute;bottom: 42px;border: 1px solid #eaedf1;z-index: 100;background: #f5f7fa;z-index: 999; }.items-choose .items-num li {padding: 10px 0 10px 6px;font-size: 14px; }.items-choose .items-num li:hover {/*background: #1AB394;*/background: #4a8df0;color: #fff; }.page-wrapper .activePage {color: #fff;/*background: #1AB394;*/background: #4a8df0; }.canNot {cursor: not-allowed; }.page-wrapper button {background: #fff;font-size: 14px;color: #5e6470; } .chooseNum {cursor: pointer;font-size: 14px;color: #5e6470; } </style>

具體頁面的應用：

<template><!-- 分頁器組件 --><div class="pagination"><VuePaginationref="vuePagination":current-page="pagination.currentPage":pageSize="pagination.pageSize":totals="pagination.totals"@size-change="handleSizeChange"@current-change="handleCurrentChange"/></template><script>import VuePagination from "@/components/vuePagination";export default {data() {return {pagination: {pageSize: 10, // 顯示的條數totals: 0, // 總數currentPage: 1, // 當前第幾頁},},components: {VuePagination,},methods: {// 改變每頁的顯示數量handleSizeChange(val) {this.pagination.pageSize = val.pageSize;this.productLineList()},// 翻頁handleCurrentChange(val) {val.totals = this.pagination.totals;this.pagination = {...val,};this.productLineList()},}; </script>

寫到這里VUE進行分頁的功能就可以實現啦！！！

總結

以上是生活随笔為你收集整理的vue 分页器的全部內容，希望文章能夠幫你解決所遇到的問題。

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