vue自定义分页组件---切图网 - pwindy

Z时代
2024-01-10
分类：综合

vue

vue自定义分页组件---切图网

vue2.5自定义分页组件 Pagination.vue，可设置每页显示条数，带跳转框直接跳转到相应页面，亲测有用。目前很多框架自带有分页组件比如elementUI，不过在面对一个拿到PSD稿，然后重新切图，重新VUE开发的项目来说，自定义分页组件才是应万变的最佳打开方式。

html

<template>
<div class="pagination" v-if="totalPage>1">
<span v-if="!small" class="total">共{{totalCount}}条记录<!-- 第{{currentPage}}/{{totalPage}}页--></span>
<ul class="paging">
<li class="prev" :class="{\'disabled\':currentPage<=1}" @click="currentPage<=1?\'\':turn(currentPage-1)"><i class="iconfont icon-chevron-left"></i></li>
<li v-for="i in showPageBtn" class="num" :class="{\'active\':i==currentPage}" v-if="i>0" @click="turn(i)">{{i}}</li>
<li v-else-if="i===\'-\'" class="num iconfont icon-more" :class="{\'icon-d-arrow-left\':toPrev}" @click="turn(currentPage-1)" @mouseenter="toPrev=true" @mouseleave="toPrev=false"></li>
<li v-else-if="i===\'+\'" class="num iconfont icon-more" :class="{\'icon-d-arrow-right\':toNext}" @click="turn(currentPage+1)" @mouseenter="toNext=true" @mouseleave="toNext=false"></li>
<li class="next" :class="{\'disabled\':currentPage>=totalPage}" @click="currentPage>=totalPage?\'\':turn(currentPage+1)"><i class="iconfont icon-chevron-right"></i></li>
</ul>
<select v-if="!small" v-model="limitNum" @change="turn(currentPage)">
<option v-for="item in limitNums" :value="item">{{item}}条/页</option>
</select>
<span v-if="all" class="jump">前往<input type="number" autocomplete="off" min="1" :max="totalPage" v-model="goPage" @keyup.enter="turn(goPage)">页</span>
</div></template>

<script>
export default {
name:\'MyPagination\',
props: {
currentPage: {//当前页
type: Number,
default: 1,
},
limit:{//每页显示条数
type: Number,
default: 10,
},
totalCount:{//总条数
type: Number,
required: true
},
small:{
type:Boolean,
default: false,
},
all:{
type:Boolean,
default: false,
}
},
data() {
return {
goPage:\'\',
limitNum:\'\',
limitNums:[5,10,15,20,25,30],
toPrev:false,
toNext:false,
}
},
created: function () {
this.initLimitNums();
},
computed: {
totalPage(){
return Math.ceil(this.totalCount / this.limit)
},
showPageBtn() {
let pageNum = Number(this.totalPage),
index = Number(this.currentPage),
arr = [];
if (pageNum <= 9) {
for(let i = 1; i <= pageNum; i++) {
arr.push(i)
}
return arr
}
if (index < 5) return [1,2,3,4,5,6,7,\'+\',pageNum]
if (index >= pageNum -1) return [1,2,\'-\', pageNum -5,pageNum -4,pageNum -3, pageNum -2, pageNum -1, pageNum]
if (index === pageNum -2) return [1,2,\'-\', pageNum -5,pageNum -4,pageNum-3, pageNum-2, pageNum-1, pageNum]
return [1,\'-\', index-2,index-1, index, index + 1,index + 2, \'+\', pageNum]
}
},
methods: {
initLimitNums() {
this.limitNum=this.limit;
//if (this.limitNums.indexOf(this.limit) == -1) {
if (!this.limitNums.includes(this.limit)) {
this.limitNums.push(this.limit);
this.limitNums.sort(function (a, b) {
return a-b;
});
}
},
//翻页，显示条数变化
turn(page) {
let i = parseInt(Number(page));
if(i<1){
i=1;
}else if(i>this.totalPage){
i=this.totalPage;
}
if(this.limitNum!==this.limit&&this.limitNum!==\'\'){//每页显示条数改变
let pages=Math.ceil(this.totalCount / this.limitNum);
if(page>pages){
i=pages;
}
this.$emit(\'update:limit\', this.limitNum);
}
this.$emit(\'update:currentPage\', i);
this.$emit(\'turn\');
}
}
}
</script>

<!–测试-分页–>

<template>
<div class="box">
...
<my-pagination :currentPage.sync="currentPage"
:limit.sync="limit"
:totalCount="totalCount"
@turn="getTableData"></my-pagination>
</div>
</template>

<script>
import MyPagination from \'./Pagination\'
export default {
components: {
MyPagination
},
data() {
return {
currentPage: 1,//当前页码
limit: 10,//每页显示条数
totalCount:0,//总页数
}
},
created: function () {
this.getTableData();
},
methods: {
getTableData() {
let params = this.$qs.stringify({
\'pageSize\': this.limit,
\'pageNum\': this.currentPage
});
this.$http.post(\'/api/...\', params).then(res => {
this.totalCount = res.data.totalCount;
});
}
}
}</script>