今天在開發后台管理頁面時需要用到分頁，研究了半天沒有弄出來，
為了提高工作效率，果斷找了我公司前端大佬，
咔咔一頓操作，完成~~~
代碼：
首先在components中將分頁頁面寫好
代碼：
<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">
<button
class="fl h50 cursor"
:class="{canNot:currentPage==1}"
@click="firstPage"
:disabled="preDisabled"
>首頁</button>
<button
class="fl h50 cursor"
:class="{canNot:currentPage==1}"
@click="prePage"
:disabled="preDisabled"
>上一頁</button>
<ul class="fl">
<li
v-for="(item,index) in itemArr"
:key="index"
class="cursor"
@click="changePage(item)"
:class="{activePage:currentPage=== item}"
>{{item}}</li>
</ul>
<button
class="fl h50 cursor"
@click="nextPage"
:class="{canNot:currentPage==totalPages}"
:disabled="nextDisabled"
>下一頁</button>
<button
class="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">
<li
v-for="(item,index) in pageSizeSettings"
:key="index"
@click.stop="chooseNum(item)"
>{{item}}</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "VuePagination",
props: {
pageSize: {
// 每頁顯示數量
default: 0,
type: Number,
},
totals: {
// 總數
default: 0,
type: Number,
},
tab: {
type: Boolean,
default: false,
},
pageSizeSettings: {
// 配置下拉 選pageSize
type: 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) {
// 改變pageSize
this.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() {
// 點擊切換條件篩選 重置currentPage
this.currentPage = 1;
},
},
};
</script>
<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">
<VuePagination
ref="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進行分頁的功能就可以實現啦，小白立志於為更多前端小白寫出最簡單最易懂的代碼，歡迎大家轉載關注、