想要实现一个这种分页，我们可以改造elementui的分页，代码如下：
父组件引用时，直接引用传入对应参数就可以了
详细代码如下，可以直接拿去用：
<template>
<div class="user-pagination">
<el-button
type="button"
size="mini"
@click="jumpFirstPage"
class="my-btn"
:disabled="total <= 10 ? true : false"
>首页</el-button
>
<el-pagination
ref="pagination"
background
prev-text="上一页"
next-text="下一页"
layout="prev, pager, next, slot, total"
@current-change="handleCurrentChange"
:current-page="pageNum"
:total="total"
:page-size="pageSize"
style="display: inline-block; padding-left: 0px"
>
<el-button
type="button"
size="mini"
@click="jumpLastPage"
class="my-btn"
:disabled="total <= 10 ? true : false"
>尾页</el-button
>
</el-pagination>
</div>
</template>
<script>
export default {
name: "myPageination",
props: {
total: {
type: Number,
default: 0,
},
pageSize: {
type: Number,
default: 10,
},
pageNum: {
type: Number,
default: 1,
},
},
methods: {
jumpFirstPage() {
this.emit("pageNumData", 1);
},
jumpLastPage() {
let font = this.emit("pageNumData", cpage);
},
handleCurrentChange(val) {
this.$emit("pageNumData", val);
},
},
};
</script>
<style lang='scss' scoped>
.user-pagination {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
.my-btn {
background: transparent;
border: 1px solid#31518b;
color: #fff !important;
margin: 0 2px;
}
.my-btn:last-child {
margin-right: 10px;
}
::v-deep .el-button {
position: relative;
z-index: 12902910291029;
}
}
::v-deep .el-pagination.is-background .btn-prev,
::v-deep .el-pagination.is-background .btn-next {
padding: 0 8px;
color: #fff;
}
::v-deep .el-pagination.is-background .btn-prev > span,
::v-deep .el-pagination.is-background .btn-next > span,
::v-deep .el-button > span {
color: #fff;
}
</style>
