一、封装 pagination组件
Pagination.vue
<template>
<div
:class="{
hidden: hidden
}"
class="pagination-container"
>
<span
class="refresh_icon el-icon-refresh"
title="刷新"
@click="handleRefreshTable"
></span>
<el-pagination
:background="background"
:current-page.sync="currentPage"
:page-sizes="pageSizes"
:page-size.sync="pageSize"
:layout="layout"
:total="total"
:pager-count="pagerCount"
v-bind="$attrs"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
></el-pagination>
</div>
</template>
<script>
export default {
props: {
hidden: {
// 控制 分页是否出现，这里一般设置total小于等于0的时候，将分页组件隐藏。
type: Boolean,
default: false
},
total: {
// 数据总条数
required: true,
type: Number
},
page: {
//当前页
type: Number,
default: 1
},
limit: {
//每页显示条目个数， 限制 每页多少条数据
type: Number,
default: 10
},
pageSizes: {
// 每页显示个数选择器的选项设置,下拉选择框的选项值
type: Array,
default() {
return [10, 20, 30, 50];
}
},
layout: {
// 组件布局
type: String,
default: "total, sizes, prev, pager, next, jumper"
},
background: {
// 是否为分页按钮添加背景色，默认有背景，数字在蓝色的小框内的样式
type: Boolean,
default: true
},
pagerCount: {
//页码按钮的数量， 默认显示7个数，当总页数超过该值时会折叠,注意这里：它必须是 大于等于 5 且小于等于 21 的奇数
type: Number,
default: 7
}
},
computed: {
currentPage: {
// 计算属性返回当前页 （会改变）
get() {
return this.page;
},
set(val) {
}
},
pageSize: {
// 返回每页的限制条数，如每页30条，支持 .sync 修饰符实现同步更改
get() {
return this.limit;
},
set(val) {
}
}
},
methods: {
handleSizeChange(val) {
this.$emit("handleSizeChange", val);
},
handleCurrentChange(val) {
this.$emit("handleCurrentChange", val);
},
handleRefreshTable() {
this.$emit("handleRefreshTable", {
current: this.currentPage,
pageSize: this.pageSize
});
}
}
};
</script>
<style lang="scss">
.pagination-container {
background: #f1f1f1;
display: flex;
width: 100%;
.refresh_icon {
width: 32px;
color: #409eff;
margin: 8px 0 0 15px;
cursor: pointer;
font-weight: 600;
font-size: 18px;
}
}
.hidden {
display: none;
}
</style>
二、在组件中引入，并使用 刚刚封装的Pagination组件
<template>
<div class="test">
<el-button type="primary" @click="handleChangeTotal">更改total数</el-button>
<comn-pagination
:total="myPages.total"
:limit.sync="myPages.pageSize"
:page.sync="myPages.pageNum"
:hidden="myPages.total <= 0"
@handleCurrentChange="handleCurrentChange"
@handleSizeChange="handleSizeChange"
@handleRefreshTable="handleRefreshTable"
></comn-pagination>
</div>
</template>
<script>
import comnPagination form "@/components/Pagination.vue"
export default {
components:{
comnPagination
},
data() {
return {
myPages: {
pageSize: 10,
pageNum: 1,
pages: 3,
total: 30
},
tableInfo: {
// 要传给后台的数据
pageNum: 1,// 当前页为 1
pageSize: 10// 每页10条
}
};
},
methods: {
handleChangeTotal() {
// 一般是，从后台拿到列表数据的时候，更新total的值， 这里只是做一个更改示例
let total = 100;
this.$set(this.myPages, "total", total);
},
handleSizeChange(val) {
console.log("每页条数改变：", val);
// 在这里更改 一页的条数，并刷新列表
this.$set(this.tableInfo, "pageSize", val);
},
handleCurrentChange(val) {
console.log("当前页改变：", val);
this.$set(this.tableInfo, "pageNum", val);
// 在这里刷新列表
},
handleRefreshTable(val) {
console.log("刷新当前页：", val);
this.$set(this.tableInfo, "pageNum", val.current);
this.$set(this.tableInfo, "pageSize", val.pageSize);
// 在这里刷新列表
}
}
};
</script>
更改total后：
