vue 實現(xiàn)分頁組件
寫了個后臺管理項目有很多表格的數(shù)據(jù)加匈，寫了個分頁組件
QQ截圖20190315171433.png
-
首先新建一個子組件paging.vue,代碼如下：
<template>
<div>
<div class="page-helper" v-if="showPageHelper">
<div class="page-list">
<!--totalCount/12根據(jù)自己每頁顯示的條數(shù) -->
<span class="total-content">共{{Math.ceil(totalCount/12)}}頁</span>
<span class="page-item" :class="{'disabled': currentPage == 1}" @click="prevPage">上一頁</span>
<span class="page-item" v-for="num in groupList" :class="{'page-current':currentPage===num}" :key="num"
@click="jumpPage(num)">{{num}}</span>
<span class="page-item" :class="{'disabled': currentPage == totalPage}" @click="nextPage">下一頁</span>
<span class="ml20 jump-to">跳至</span>
<input class="page-jump-to input" type="type" v-model="jumpPageNumber">
<span class="page-style">頁</span>
<span class="page-item jump-go-btn" @click="goPage(jumpPageNumber)" >確定</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'pageHelper',
data () {
return {
ddd:this.pageNumber,
currentPage: this.pageNumber,
currentSize: this.pageSizeArray[0],
jumpPageNumber: 1,
showPrevMore: false,
showNextMore: false
}
},
// 獲取父組件傳入的數(shù)據(jù)
props: {
pageNumber: { //當前頁面
type: Number,
default: 1
},
pageSizeArray: { //每頁顯示數(shù)量
type: Array,//Array
default () {
return [1]
}
},
totalCount: { //總條數(shù)
type: Number,
default: 150
},
pageGroup: { //連續(xù)頁碼個數(shù)
type: Number,
default: 5
}
},
computed: {
showPageHelper () {
return this.totalCount > 0
},
totalPage () { //總頁數(shù)
return Math.ceil(this.totalCount / this.currentSize);
},
groupList () { //獲取分頁碼
const groupArray = []
const totalPage = this.totalPage//總頁碼
const pageGroup = this.pageGroup//顯示每頁個數(shù)
const _offset = (pageGroup - 1) / 2
let current = this.currentPage
const offset = {
start: current - _offset,
end: current + _offset
}
if (offset.start < 1) {
offset.end = offset.end + (1 - offset.start)
offset.start = 1
}
if (offset.end > totalPage) {
offset.start = offset.start - (offset.end - totalPage)
offset.end = totalPage
}
if (offset.start < 1) offset.start = 1
this.showPrevMore = (offset.start > 1)
this.showNextMore = (offset.end < totalPage)
for (let i = offset.start; i <= offset.end; i++) {
groupArray.push(i)
}
return groupArray
}
},
methods: {
prevPage () {
if (this.currentPage > 1) {
this.jumpPage(this.currentPage - 1)
}
},
nextPage () {
if (this.currentPage < this.totalPage) {
this.jumpPage(this.currentPage + 1);
}
},
showPrevPage() {
this.currentPage = this.currentPage - this.pageGroup > 0 ? this.currentPage - this.pageGroup : 1
},
showNextPage() {
this.currentPage = this.currentPage + this.pageGroup < this.totalPage ? this.currentPage + this.pageGroup : this.totalPage
},
goPage (jumpPageNumber) {
if(Number(jumpPageNumber) <= 0){
jumpPageNumber = 1
}if(Number(jumpPageNumber) >= this.totalPage){
jumpPageNumber = this.totalPage
}
if(isNaN(jumpPageNumber)){
jumpPageNumber = 1
alert("請輸入正確的頁碼")
}
let re = /^[1-9]+[0-9]*]*$/
if (!re.test(jumpPageNumber))
{
alert("請輸入正確的頁碼");
jumpPageNumber = 1
}
this.jumpPage(Number(jumpPageNumber))
},
jumpPage (pageNumber) {
if (this.currentPage !== pageNumber) { //點擊的頁碼不是當前頁碼
this.currentPage = pageNumber
//父組件通過change方法來接受當前的頁碼
// jumpPage
this.$emit('pagechange', {currentPage: this.currentPage, currentSize: this.currentSize})
}
}
},
watch: {
currentSize (newValue, oldValue) {
if(newValue !== oldValue){
if(this.currentPage >= this.totalPage){ //當前頁面大于總頁面數(shù)
this.currentPage = this.totalPage
}
this.$emit('jumpPage', {currentPage: this.currentPage, currentSize: this.currentSize})
}
}
}
}
</script>
<style scoped>
.page-helper {
margin-top:50px;
font-weight: 500;
height: 40px;
text-align: center;
color: #888;
margin: 10px auto;
}
.page-list {
font-size: 0;
height: 50px;
line-height: 50px;
/* margin-top:57px; */
}
.page-list span {
/* display: block; */
font-size: 18px;
/* margin-right: 5px; */
user-select: none;
width: 53px;
/* height: 40px; */
}
.page-list .page-item {
border: 1px solid #aaa;
padding: 10px 10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
cursor: pointer;
margin-right: 5px;
}
.page-ellipsis {
padding: 0 8px;
}
.input {
width: 36px;
height: 46px;
font-size: 18px;
border: 1px solid #aaa;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-align: center;
}
.page-list .jump-go-btn {
font-size: 18px;
height: 50px;
}
.page-select{
border: 1px solid #aaa;
padding: 5px 8px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
cursor: pointer;
margin-right: 5px;
margin-left: 5px;
}
.page-list .disabled{
color: #C0C0C0;
cursor: not-allowed;
}
.page-list .page-current {
cursor: default;
color: #fff;
background: #D0121B;
border-color: #D0121B;
}
.total-content{
margin-right:22px;
}
.jump-to{
margin-left:19px;
margin-right:11px;
}
.page-style{
margin-left:11px;
margin-right:11px;
}
</style>
2.在父組件中引入，因為這個項目有搜索功能在頁碼中用到了 loading來更新頁碼數(shù)據(jù)扳剿。
<template>
<v-pagination @pagechange="pagechange" :totalCount= total :page-number="pageNumber" :page-size-array="PageSizeArray" v-if="!loading" ></v-pagination>
</template>
<script>
import pagination from '@/components/paging/paging'
export default {
data(){
return {
PageSizeArray: [12], //每頁的條數(shù)
total:1, //總條數(shù)
pageNumber: 1, // 當前的頁數(shù)
loading:false,//更新頁碼
}
}峦甩，
methods:{
pagechange:function(page){
// ajax請求, 向后臺發(fā)送 page.currentPage, 來獲取對應的數(shù)據(jù)，
//發(fā)送請求是 loading=true,請求成功后 loading=false,就能更新過頁碼來，如果沒有搜索功能的可以不用添加loading
},
},
components: {
'v-pagination': pagination,
},
}
</script>
