vue2 Pagination 分页组件
Pagination.vue
<template>
<div class="page-wrap">
<el-pagination
background
:layout="layout"
:total="total"
:page-size="size"
:page-sizes="pageSizes"
:current-page="currentPage"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</template>
<script>
export default {
name: 'Pagination',
components: {},
props: {
total: {
type: Number,
default: 0
},
layout: {
type: String,
default: 'total, prev, pager, next, sizes, jumper'
},
currentPage: {
type: Number,
default: 1
},
size: {
type: Number,
default: 20
},
pageSizes: {
type: Array,
default: () => {
return [20, 50, 100];
}
},
handleSizeChange: {
type: Function,
default: new Function()
},
handleCurrentChange: {
type: Function,
default: new Function()
}
},
data() {
return {
};
},
mounted() {
let pageText = document.getElementsByClassName('el-pagination__jump')[0];
if (pageText) {
pageText.childNodes[0].nodeValue = '跳至';
}
},
methods: {}
};
</script>
<style lang="scss" scoped>
.page-wrap {
display: flex;
justify-content: end;
padding-right: 24px;
background: #ffffff;
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
background: #FFFFFF;
color: #2469F1;
border-radius: 2px;
border: 1px solid #2469F1;
}
}
</style>
使用
<Pagination
class="pagination"
:total="pages.total"
:size="pages.pageSize"
:current-page="pages.pageNum"
:handle-size-change="handleSizeChange"
:handle-current-change="handleCurrentChange"
/>
pages: {
total: 0,
pageNum: 1,
pageSize: 20
},
handleSizeChange(val) {
this.pages.pageNum = 1;
this.pages.pageSize = val;
this.initTable({
sizeOrder: this.sizeOrder,
expiredOrder: this.expiredOrder
});
},
handleCurrentChange(val) {
this.pages.pageNum = val;
this.initTable({
sizeOrder: this.sizeOrder,
expiredOrder: this.expiredOrder
});
}
效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/2272d1372fc152b9e1fd470da87fdf69.png)