想要實(shí)現(xiàn)一個(gè)這種分頁，我們可以改造elementui的分頁绪爸，代碼如下：
父組件引用時(shí)蛉拙，直接引用傳入對應(yīng)參數(shù)就可以了
詳細(xì)代碼如下，可以直接拿去用：
<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>
