300 lines
7.3 KiB
Vue
300 lines
7.3 KiB
Vue
<template>
|
|
<div class="pagination">
|
|
<button style="background-color: #ffff">共 {{ total }} 条</button>
|
|
<el-select
|
|
v-model="currentpageSize"
|
|
placeholder="请选择"
|
|
style="width: 100px; margin-right: 16px"
|
|
size="mini"
|
|
@change="changesize"
|
|
>
|
|
<el-option
|
|
v-for="item in options"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
<button @click="updateCPage(currentPage - 1)" :disabled="currentPage <= 1" >
|
|
上一页
|
|
</button>
|
|
<button v-if="startEnd.start > 1" @click="updateCPage(1)">1</button>
|
|
<button
|
|
v-if="startEnd.start > 2"
|
|
icon="el-icon-more"
|
|
@click="updateCPage(currentPage - 5)"
|
|
:class="[
|
|
quickprevIconClass,
|
|
{ buttonactive: quickprevIconClass == 'el-icon-d-arrow-left' },
|
|
]"
|
|
@mouseenter="onMouseenter('left')"
|
|
@mouseleave="quickprevIconClass = 'el-icon-more'"
|
|
></button>
|
|
<template v-for="(item, index) in totalPage">
|
|
<button
|
|
:class="{ active: Number(currentPage) === item }"
|
|
:key="index"
|
|
v-if="item >= startEnd.start && item <= startEnd.end"
|
|
@click="updateCPage(item)"
|
|
>
|
|
{{ item }}
|
|
</button>
|
|
</template>
|
|
<button
|
|
v-if="startEnd.end < totalPage - 1"
|
|
icon="el-icon-more"
|
|
:class="[
|
|
quicknextIconClass,
|
|
{ buttonactive: quicknextIconClass == 'el-icon-d-arrow-right' },
|
|
]"
|
|
@click="updateCPage(currentPage + 5)"
|
|
@mouseenter="onMouseenter('right')"
|
|
@mouseleave="quicknextIconClass = 'el-icon-more'"
|
|
></button>
|
|
<button v-if="startEnd.end < totalPage" @click="updateCPage(totalPage)">
|
|
{{ totalPage }}
|
|
</button>
|
|
<button
|
|
@click="updateCPage(currentPage + 1)"
|
|
:disabled="currentPage >= totalPage"
|
|
>
|
|
下一页
|
|
</button>
|
|
<span style="margin-left: 16px">
|
|
前往
|
|
<el-input
|
|
v-model="page"
|
|
min="1"
|
|
:max="totalPage"
|
|
style="width: 50px; margin: 0 6px"
|
|
size="mini"
|
|
@focus="foucus"
|
|
@keyup.enter.native="blur"
|
|
@blur="blur"
|
|
></el-input>
|
|
页
|
|
</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
/*
|
|
1. total,总条数 (外部使用Pagination组件的区域传递进来的数据)
|
|
2. pageSize,每页显示多少条(外部使用Pagination组件的区域传递进来的数据)
|
|
3. totalPage, 根据1,2派生出总页数
|
|
4. lxyms,连续页码数(外部使用Pagination组件的区域传递进来的数据)
|
|
5. currentPage,当前页(内部数据)
|
|
6. startEnd,连续页码的起始页 & 最终页
|
|
7. indexFromWrap: 外部逻辑传入的当前页下标
|
|
*/
|
|
name: "Pagination",
|
|
//由父组件传递总条数 每页显示数 连续页码数 当前页下标
|
|
props: ["total", "pageSize", "indexFromWrap", "indexFrom"],
|
|
data() {
|
|
return {
|
|
lxyms: 7,
|
|
currentPage: this.indexFromWrap,
|
|
page: this.indexFromWrap,
|
|
quickprevIconClass: "el-icon-more",
|
|
quicknextIconClass: "el-icon-more",
|
|
options: [
|
|
{
|
|
value: 10,
|
|
label: "10条/页",
|
|
},
|
|
{
|
|
value: 20,
|
|
label: "20条/页",
|
|
},
|
|
{
|
|
value: 30,
|
|
label: "30条/页",
|
|
},
|
|
{
|
|
value: 50,
|
|
label: "50条/页",
|
|
},
|
|
{
|
|
value: 100,
|
|
label: "100条/页",
|
|
},
|
|
],
|
|
currentpageSize: 10,
|
|
};
|
|
},
|
|
mounted() {},
|
|
computed: {
|
|
//总页数
|
|
totalPage() {
|
|
return Math.ceil(this.total / this.pageSize);
|
|
},
|
|
//最终页-起始页 = 连续页码数-1
|
|
startEnd() {
|
|
let { currentPage, lxyms, totalPage } = this;
|
|
// return console.log(this)
|
|
let start;
|
|
let end;
|
|
//计算连续页码的起始页
|
|
start = currentPage - Math.floor(lxyms / 2);
|
|
if (start < 1) {
|
|
start = 1;
|
|
this.quickprevIconClass = "el-icon-more";
|
|
}
|
|
//结束页
|
|
end = start + lxyms - 1; //此时当start<1时 在计算end时已经进行补位了
|
|
// end>totalPage ?end=totalPage:""
|
|
if (end > totalPage) {
|
|
end = totalPage;
|
|
start = end - lxyms + 1; //此处当结束位置超出时,用start进行补位
|
|
start < 1 ? (start = 1) : ""; // 要满足start处于一个正常的范围
|
|
}
|
|
if (start >= 2 && end < totalPage - 1) {
|
|
start += 2;
|
|
}
|
|
if (end == totalPage - 1 && start > 1) {
|
|
start += 1;
|
|
end -= 1;
|
|
}
|
|
return { start, end };
|
|
},
|
|
},
|
|
methods: {
|
|
foucus() {},
|
|
blur() {
|
|
if (!this.page) {
|
|
this.page = 1;
|
|
}
|
|
if (this.page > this.totalPage) {
|
|
this.page = this.totalPage;
|
|
}
|
|
this.updateCPage(Number(this.page));
|
|
},
|
|
changesize() {
|
|
this.currentPage = 1;
|
|
this.page = 1;
|
|
this.$emit("updateCPage", this.currentPage, this.currentpageSize);
|
|
},
|
|
onMouseenter(direction) {
|
|
if (direction === "left") {
|
|
this.quickprevIconClass = "el-icon-d-arrow-left";
|
|
} else {
|
|
this.quicknextIconClass = "el-icon-d-arrow-right";
|
|
}
|
|
},
|
|
updateCPage(currentPage) {
|
|
if (currentPage < 1) return;
|
|
if (currentPage === this.currentPage) return;
|
|
if (currentPage > this.totalPage - 3) {
|
|
this.quicknextIconClass = "el-icon-more";
|
|
}
|
|
if (currentPage > this.totalPage) {
|
|
this.currentPage = this.totalPage;
|
|
} else {
|
|
this.currentPage = currentPage;
|
|
}
|
|
//将当前页的数据,与外部的父组件进行数据交互
|
|
this.$emit("updateCPage", this.currentPage, this.currentpageSize);
|
|
},
|
|
},
|
|
watch: {
|
|
currentPage: {
|
|
handler(val) {
|
|
this.page = val;
|
|
},
|
|
deep: true,
|
|
immediate: true,
|
|
},
|
|
//监听当前页下标
|
|
indexFromWrap: {
|
|
handler(val) {
|
|
this.currentPage = val;
|
|
},
|
|
deep: true,
|
|
immediate: true,
|
|
},
|
|
indexFrom: {
|
|
handler(val) {
|
|
if (val) {
|
|
this.currentpageSize = val;
|
|
} else {
|
|
this.currentpageSize = 10;
|
|
}
|
|
},
|
|
deep: true,
|
|
immediate: true,
|
|
},
|
|
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.pagination {
|
|
position: absolute;
|
|
bottom: 5px;
|
|
right: 20px;
|
|
height: 40px;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
::v-deep .el-input__inner {
|
|
padding: 0 !important;
|
|
font-size: 13px;
|
|
text-align: center;
|
|
}
|
|
|
|
::v-deep .el-input--suffix {
|
|
.el-input__inner {
|
|
padding-right: 20px !important;
|
|
}
|
|
}
|
|
|
|
span {
|
|
display: inline-block;
|
|
font-size: 13px;
|
|
min-width: 35.5px;
|
|
height: 28px;
|
|
line-height: 28px;
|
|
vertical-align: top;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
button {
|
|
margin: 0 5px;
|
|
background-color: #f4f4f5;
|
|
color: black;
|
|
outline: none;
|
|
border-radius: 2px;
|
|
vertical-align: top;
|
|
display: inline-block;
|
|
font-size: 13px;
|
|
min-width: 45px;
|
|
height: 28px;
|
|
line-height: 28px;
|
|
cursor: pointer;
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
border: 0;
|
|
|
|
&[disabled] {
|
|
color: #c0c4cc;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
&.active {
|
|
background-color: #409eff;
|
|
color: #fff;
|
|
}
|
|
|
|
&.buttonactive {
|
|
color: #409eff;
|
|
}
|
|
}
|
|
}
|
|
</style>
|