elementui el-pagination 分页组件封装

分页组件是比较常用的，有表格的地方基本上都存在分页，使用 elementui 里面的分页进行封装方便使用。

一. 后端分页

<template><div class="pagination"><el-pagination @size-change="sizeChange"@current-change="currentChange":current-page="currentPage":page-sizes="propPageSizes":page-size="pageSize"backgroundlayout="total, sizes, prev, pager, next, jumper":total="total"v-if="total > 0"></el-pagination></div>
</template><script>
export default {props: {callback: { // 获取列表数据方法type: Function,default() {return function() {};}},propCurrentPage: { // 当前页type: [Number],default: 1},propPageSizes: { // 配置每页显示多少条type: Array,default: function() {return [10, 20, 30];}},propPageSize: { // 默认每页显示条数type: [Number],default: 10},total: { // 数据总条数type: [Number],default: 0}},data() {return {currentPage: this.propCurrentPage, // 页面的当前页pageSize: this.propPageSize // 页面分页器大小};},methods: {// 改变当前页currentChange(val) {this.currentPage = val;this['callback']();},// 改变每页显示多少条sizeChange(val) {this.pageSize = val;this.currentPage = 1;this['callback']();}}
};
</script><style lang="less" scoped>
// 样式根据自己的实际情况修改，也可以用下边的
.pagination {margin-top: 20px;text-align: right;/deep/ .el-pagination.is-background .el-pager li,/deep/ .el-pagination.is-background .btn-prev,/deep/ .el-pagination.is-background .btn-next {color: #666;background-color: #fff;border: 1px solid #e4e9ec;border-radius: 4px;}/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {color: #11889c;background-color: #fff;border: 1px solid #11889c;}/deep/ .el-pagination.is-background .btn-prev:disabled,/deep/ .el-pagination.is-background .btn-next:disabled {color: #c0c4cc;}
}
</style>

<Pagination ref="pagination":callback="getMsgList":total="total">
</Pagination>

效果图

二. 前端实现分页

待更新。。。

这个分页其实也没什么难度，是后端实现的分页，后面再总结下前端实现分页的方法。有问题，欢迎大家随时留言交流！