这是自己写的一个vue 分页器组件,里面的样式有点丑,有需要的可以自己修改,写的简单易懂,
这是子组件,分页器的主体,这里的10是每页的显示的个数,根据个人实际情况来定
<template>
<div class="pager-wrapper">
<div>
共
<span>{{this.total}}</span>
条
</div>
<button
class="pager-button"
@click="prev()"
v-if="{'disabled':prevDisable}"
:class="{'pager-disabled':prevDisable}"
><</button>
<div v-for="i in tt" :key="i">
<span class="pager-span" v-if="i==currentPage" @click="current(i)">{{i}}</span>
<span class="pager-s" v-else-if="currentPage<5&&(i)<6" @click="current(i)">{{i}}</span>
<span
v-else-if="total<7||i==1||i==total||(currentPage-2<=i&&i<=currentPage+2)"
class="pager-s"
@click="current(i)"
>{{i}}</span>
<div v-else>
<span v-if="currentPage<5&&i==6" :key="i" class="pager-spr">…</span>
<span v-if="currentPage==4&&i==7" :key="i" class="pager-spr">…</span>
<span v-if="currentPage>4&&i==currentPage-3" :key="i" class="pager-spr">…</span>
<span v-if="currentPage>4&&i==currentPage+3" :key="i" class="pager-spr">…</span>
</div>
</div>
<button class="pager-button" @click="next()" :class="{'pager-disabled':nextDisable}">></button>
<div class="pager-input">
<input type="text" class="pager-text" v-model="cuse" />
<button @click="Go()">GO</button>
</div>
</div>
</template>
<script>
export default {
props: {
total: {
type: Number,
default: 1
},
currentPage: {
type: Number,
default: 1
}
},
data() {
return {
cuse: this.total
}
},
computed: {
prevDisable() {
if (this.currentPage > 1) {
return false
} else {
return true
}
},
nextDisable() {
if (this.currentPage < this.total && this.total > 1) {
return false;
} else {
return true;
}
},
tt() {
let count = 1
count = Math.floor(this.total / 10)
if (this.total % 10 == 0) {
return count
} else {
count += 1
return count
}
}
},
methods: {
prev() {
console.log("上一页")
if (this.currentPage == 1) {
return
} else {
this.$emit("handleSizeChange", this.currentPage - 1)
}
},
next() {
console.log("下一页")
if (this.currentPage >= this.tt) {
return
} else {
this.$emit("handleSizeChange", this.currentPage + 1)
}
},
current(val) {
console.log(val)
if (val > this.tt) {
val = this.tt
}
this.$emit('handleSizeChange', val);
},
Go() {
if (this.cuse == '') {
return;
} else if (/^\d*$/.test(parseInt(this.cuse))) {
this.current(parseInt(this.cuse));
this.cuse = '';
} else {
this.cuse = '';
return;
}
}
},
mounted() {
},
}
</script>
<style scoped >
.pager-wrapper {
display: flex;
}
.pager-wrapper .pager-button {
font-size: 12px;
width: 20px;
height: 20px;
border: 0px solid;
}
.pager-wrapper .pager-disabled {
background-color: silver;
}
.pager-wrapper .pager-span {
display: block;
width: 20px;
height: 20px;
/* border: 1px solid; */
text-align: center;
border-radius: 0.1px;
background: turquoise;
color: white;
margin: 0 5px;
}
.pager-wrapper .pager-s {
display: block;
width: 20px;
height: 20px;
text-align: center;
background-color: aliceblue;
margin: 0 3px;
}
.pager-input .pager-text {
width: 80px;
}
</style>
父组件的代码,把子组件引进来,传参和方法
<pager :total="total" :currentPage="currentPage" @handleSizeChange="handleSizeChange"></pager>
handleSizeChange(val) {
console.log(val)
this.currentPage = val
}
参考的博客:https://blog.csdn.net/web_xiaolei/article/details/81136791
element-ui https://element.eleme.cn/#/zh-CN/component/pagination