先说明页码总数是从接口返回的参数中获取的
页码是自己定义并赋值到url中,获取指定页的数据
首先新建一个page.vue组件
HTML部分,这里用了bootstrap4.0,就不去写样式了
<template>
<div class="mt-2 font-size-14">
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li class="page-item">
<button type="button" class="page-link" @click="previous">
<span>«</span>
</button>
</li>
<li class="page-item">
<button type="button" class="page-link" @click="first">
<span>首页</span>
</button>
</li>
<li class="page-item" v-if="tabPage != 1">
<button type="button" class="page-link border-0 bg-transparent">
<span>...</span>
</button>
</li>
<li class="page-item" v-for="(page,pIndex) in showPage" :key="pIndex" :class="atPageSon == pIndex+tabPage ? 'active' : ''">
<button type="button" class="page-link" @click="option(pIndex+tabPage)">
<span>{{pIndex+tabPage}}</span>
</button>
</li>
<li class="page-item" v-if="tabPage < this.sumPageSon-9">
<button type="button" class="page-link border-0 bg-transparent">
<span>...</span>
</button>
</li>
<li class="page-item">
<button type="button" class="page-link" @click="end">
<span>尾页</span>
</button>
</li>
<li class="page-item">
<button type="button" class="page-link" @click="next">
<span>»</span>
</button>
</li>
<li class="page-item ml-2">
<button type="button" class="page-link border-0 bg-transparent">
<span>共{{sumPageSon}}页</span>
</button>
</li>
</ul>
</nav>
</div>
</template>
javascript部分
<script>
export default {
name: "page",
data() {
return {
atPageSon: this.atPage, //当前页码
sumPageSon: this.sumPage //总页码
};
},
props: ["atPage", "sumPage"],
methods: {
// 上一页
// 下一页
// 首页
// 尾页
// 选择页
previous() {
if (this.atPageSon > 1) {
this.atPageSon--;
this.$emit("tabPage", this.atPageSon);
}
},
next() {
if (this.atPageSon < this.sumPageSon) {
this.atPageSon++;
this.$emit("tabPage", this.atPageSon);
}
},
first() {
this.atPageSon = 1;
this.$emit("tabPage", this.atPageSon);
},
end() {
this.atPageSon = this.sumPageSon;
this.$emit("tabPage", this.atPageSon);
},
option(page) {
this.atPageSon = page;
this.$emit("tabPage", this.atPageSon);
}
},
computed: {
// 总页数大于10就显示其中10个页码,小于等于10就显示全部页码
// 计算当前显示哪些页码(主要是为了当两边都有未显示页码的时候,当前页在中间位置,比如第6页的时候,从2开始,11结束,)
showPage(num) {
return this.sumPageSon > 10 ? 10 : num.sumPageSon;
},
tabPage() {
return this.sumPageSon > 10
? this.atPageSon > 4 && this.atPageSon < this.sumPageSon - 4
? this.atPageSon - 4
: this.atPageSon > 4 && this.atPageSon <= this.sumPageSon
? this.sumPageSon - 9
: 1
: 1;
}
},
watch: {
// 监听页码总数
// 监听路由参数(当前页码数)
// 因为我的总页码数和当前页码都是父组件传进来的,所以用了watch
sumPage(num) {
this.sumPageSon = num;
},
atPage(num) {
this.atPageSon = num;
}
}
};
</script>
父组件中
<page :at-page="this.$route.params.page" :sum-page="sumPage" @tabPage="upDate"></page>
<script>
import page from "@/components/page/page";
export default {
name: "proKind",
data() {
return {
sumPage: null,
};
},
components: {
page
},
methods: {
// 这里是当监听到分页组件事件的时候,获取传过来的页码直接切换路由,然后守卫获取到页码赋值到接口中请求数据
upDate(tabPage) {
this.$router.push({
name: "proKind",
params: { name: this.$route.params.name, page: tabPage }
});
}
},
//这里用了一个守卫来举例子,怎么获取数据看具体情况
beforeRouteUpdate(to, from, next) {
this.axios
.post(
`/api/public/list?type=${to.params.name}&page=${to.params.page}`
)
.then(res => {
next();
});
},
};
</script>
写得不是很好,尤其是计算页码处...