Pagination 分頁
當資料量過多時，使用分頁分解資料。
基礎用法
資料較少的效果
資料較多的效果
當總資料量大于
50
條時會自動呈現如上的第二種效果，可配合
maxShowPageCard
設定每一組分頁的頁簽量。
同時
pageSizeList
為必填選項，第一個下标的值即為每頁所展示的數量。
<template>
<fl-Pagination
:total = 80
:maxShowPageCard = 5
:pageSizeList = [8,15,20,30]
@changePageNum = "changePageNum"
@changePageSize = "changePageSize">
</fl-Pagination>
</template>
<script>
export default{
methods: {
changePageNum(data){
console.log(data)
},
changePageSize(data){
console.log(data)
}
},
}
</script>
文字注釋
帶有文字提示的分頁器
設定
showInfo
即可。
<template>
<fl-Pagination
:total = 80
:maxShowPageCard = 5
:pageSizeList = [8,15,20,30]
showInfo
@changePageNum = "changePageNum"
@changePageSize = "changePageSize">
</fl-Pagination>
</template>
<script>
export default{
methods: {
changePageNum(data){
console.log(data)
},
changePageSize(data){
console.log(data)
}
},
}
</script>
下拉選擇每頁顯示數量
帶有
select
選擇每頁
pagesize
的分頁器。
設定
choosePageSizeBySelect
屬性即可，
select
選擇數量由
pageSizeList
自定義。
<template>
<fl-Pagination
:total = 80
:maxShowPageCard = 5
:pageSizeList = [8,15,20,30]
showInfo
choosePageSizeBySelect
@changePageNum = "changePageNum"
@changePageSize = "changePageSize">
</fl-Pagination>
</template>
<script>
export default{
methods: {
changePageNum(data){
console.log(data)
},
changePageSize(data){
console.log(data)
}
},
}
</script>
輸入文本跳轉
帶有
input
文本框輸入跳轉指定頁碼的分頁器。
設定
choosePageNumByInput
屬性即可。
<template>
<fl-Pagination
:total = 80
:maxShowPageCard = 5
:pageSizeList = [8,15,20,30]
showInfo
choosePageSizeBySelect
choosePageNumByInput
@changePageNum = "changePageNum"
@changePageSize = "changePageSize">
</fl-Pagination>
</template>
<script>
export default{
methods: {
changePageNum(data){
console.log(data)
},
changePageSize(data){
console.log(data)
}
},
}
</script>
回調函數
通過
changePageNum
和
changePageSize
自定義函數可在每次頁碼和頁數發生變化時獲得事件監聽。
<template>
<fl-Pagination
:total = 80
:maxShowPageCard = 5
:pageSizeList = [8,15,20,30]
@changePageNum = "changePageNum"
@changePageSize = "changePageSize">
</fl-Pagination>
</template>
<script>
export default{
methods: {
changePageNum(data){
console.log(data)
},
changePageSize(data){
console.log(data)
}
},
}
</script>
Attributes
| 參數 | 類型 | 說明 | 可選值 | 預設值 |
|---|---|---|---|---|
| | 資料總數 | —— | —— |
| | 總資料量大于 | —— | |
| | | —— | |
| | 顯示分頁文本資訊 | | |
| | 是否配置下拉框 | | |
| | 是否配置文本框 | | |
| | 監聽頁碼改變的回調 | —— | —— |
| | 監聽每頁數量改變的回調 | —— | —— |
源碼：
<template>
<div class = "pragination">
<i v-if = "$attrs.showInfo == ''">共：{{totalPage}}頁 / {{total}}條</i>
<select @change="changePageSize" v-if = "$attrs.choosePageSizeBySelect == ''">
<option v-for = "item in pageSizeList" :key = "item" :value = "item">{{item}}條/頁</option>
</select>
<i class = "el-icon-arrow-left" @click = "prevPage" :style = "prevDefaultStyle"></i>
<span v-if = "totalPage > maxShowPageBox && (nowPageNum > morePageMid) && morePageMid !== 0 && total > 50" @click = "showPrevPageGroup">...</span>
<span :class = "item == nowPageNum || item + morePageMid == nowPageNum ? 'active' : ''" v-for = "item in showMaxPage" :key = "item" @click = "changePageNum(item)">{{item + morePageMid}}</span>
<span v-if = "totalPage > maxShowPageBox && morePageMid * 2 < totalPage && total > 50" @click = "showNextPageGroup">...</span>
<i class = "el-icon-arrow-right" @click = "nextPage" :style = "nextDefaultStyle"></i>
<i v-if = "$attrs.showInfo == ''">目前為第 {{nowPageNum}} 頁</i>
<i v-if = "$attrs.choosePageNumByInput == ''">前往<input type = "text" class = "inputChangePageSize" @keydown.enter="inputChangePageSize">頁</i>
</div>
</template>
<script>
export default {
name:'fl-Pagination',
props: {
total: { //資料總數
type: Number,
default: 1
},
pageSizeList: { //資料總數
type: Array,
},
maxShowPageCard:{ //最多展示的頁盒子
type: Number,
default: 5
},
pageNumList:{ //select頁碼選擇清單
type: Array,
}
},
data() {
return {
nowPageNum:1, //目前頁碼
usePageSize:this.pageSizeList[0], //每頁數量
maxShowPageBox:this.maxShowPageCard, //最多展示頁盒子
morePageMid:0, //更多展示頁擴充比例
}
},
methods: {
prevPage(){ //上一頁
if(this.nowPageNum > 1){
if(this.nowPageNum - 1 < (this.morePageMid + 1)){
this.showPrevPageGroup()
this.nowPageNum = this.maxShowPageBox + this.morePageMid
}else{
this.nowPageNum--
}
this.$emit('changePageNum',this.nowPageNum)
}
},
nextPage() { //下一頁
if(this.nowPageNum < this.totalPage){
if(this.nowPageNum + 1 > this.maxShowPageBox + this.morePageMid){
this.showNextPageGroup()
}else{
this.nowPageNum++;
}
this.$emit('changePageNum',this.nowPageNum)
}
},
changePageNum(pageNum){ //點選改變頁碼
this.nowPageNum = pageNum + this.morePageMid
this.$emit('changePageNum',this.nowPageNum)
},
showPrevPageGroup(){ //展示上一組擴充
if(this.morePageMid !== 0){
this.morePageMid -= this.maxShowPageBox;
this.nowPageNum = this.morePageMid + 1
this.$emit('changePageNum',this.nowPageNum)
}
},
showNextPageGroup(){ //展示下一組擴充
this.morePageMid += this.maxShowPageBox;
this.nowPageNum = this.morePageMid + 1
this.$emit('changePageNum',this.nowPageNum)
},
changePageSize(e){ //改變頁碼
this.nowPageNum = 1;
this.morePageMid = 0;
this.usePageSize = e.target.value
this.$emit('changePageSize',this.usePageSize)
},
inputChangePageSize(e){ //輸入框跳轉指定頁碼
if(e.target.value > this.totalPage){
return e.target.value = ''
}else{
this.nowPageNum = e.target.value
if(this.nowPageNum > this.maxShowPageBox + this.morePageMid){
this.morePageMid += this.maxShowPageBox;
}
else if(this.morePageMid !== 0){
this.morePageMid -= this.maxShowPageBox;
}
e.target.value = ''
}
this.$emit('changePageNum',this.nowPageNum)
}
},
computed: {
prevDefaultStyle(){ //上一頁按鈕額外樣式
if(this.nowPageNum == 1){
return 'cursor:no-drop'
}
},
nextDefaultStyle(){ //下一頁按鈕額外樣式
if(this.nowPageNum == this.totalPage){
return 'cursor:no-drop'
}
},
totalPage() { //總頁數
return Math.ceil(this.total / this.usePageSize)
},
showMaxPage(){ //每頁顯示的頁盒子數
if(this.morePageMid * 2 > this.totalPage){
return this.totalPage - this.morePageMid
}
if(this.totalPage < this.maxShowPageCard){
return this.totalPage
}
return this.maxShowPageCard
}
},
}
</script>
<style scoped>
.pragination{
}
i{
font-style: normal;
font-size:13px;
}
.active{
color:rgb(95, 110, 247)
}
span,.el-icon-arrow-left,.el-icon-arrow-right{
cursor: pointer;
margin:0 10px;
}
span:hover{
color:rgb(95, 110, 247)
}
.el-icon-arrow-left:hover,.el-icon-arrow-right:hover{
color:rgb(95, 110, 247);
}
select{
outline: none;
}
.inputChangePageSize{
outline: none;
width:40px;
border-radius: 15px;
border: 2px solid #ccc;
transition: 0.2s linear;
}
.inputChangePageSize:focus{
border-color:rgb(117, 156, 206);
}
</style>