show1.jpg
el-pagination 分頁組件
在中后臺系統(tǒng)中，經(jīng)常會使用分頁器組件。el-pagination 需要配置
page-size、layout、@current-change等諸多屬性。每個頁面都這樣子使用的話既容易出現(xiàn)錯誤，也會造成代碼冗余
show2.jpg
組件設(shè)計（完整版）
p-el-pagination 默認的屬性，如background、small、page-sizes等，請根據(jù)實際業(yè)務(wù)修改默認值
調(diào)用效果及代碼
show3.png
<!--
* @Date: 2022-05-11 14:38:32
* @Author: surewinT 840325271@qq.com
* @LastEditTime: 2022-05-11 14:50:41
* @LastEditors: surewinT 840325271@qq.com
* @Description:
-->
<template>
<div class="">
<p-el-pagination
:total="total"
:size="100"
@handlePageSizeChange="handlePageSizeChange"
/>
</div>
</template>
<script>
import Pagination from './p-el-pagination.vue';
export default {
components: {
'p-el-pagination': Pagination,
},
props: [],
data() {
return {
total: 500,
};
},
mounted() {},
watch: {},
methods: {
handlePageSizeChange(page, size) {
console.log('分頁器變化：', page, size);
},
},
};
</script>
<style lang='scss' scoped>
</style>
組件源碼（p-el-pagination .vue）
<!--
* @Date: 2021-09-27 17:17:18
* @Author: surewinT 840325271@qq.com
* @LastEditTime: 2022-05-11 14:50:49
* @LastEditors: surewinT 840325271@qq.com
* @Description: 分頁器組件
-->
<template>
<div class="" style="text-align: center">
<el-pagination
@size-change="sizeChange"
@current-change="pageChange"
:current-page="currentPage"
:page-sizes="[30, 50, 100, 200, 500]"
:page-size="size"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
background
small
>
</el-pagination>
</div>
</template>
<script>
export default {
components: {},
props: {
total: {
type: Number,
default: 0,
},
size: {
type: Number,
default: 30,
},
page: {
type: Number,
default: 1,
},
},
data() {
return {
currentPage: 1,
currentsize: 30,
};
},
mounted() {
this.currentsize = this.size;
this.currentPage = this.page;
},
watch: {
size() {
this.currentsize = this.size;
},
page() {
this.currentPage = this.page;
},
},
methods: {
sizeChange(val) {
this.currentsize = val;
// size變化時，默認定位到第一頁
this.currentPage = 1;
this.$emit(
'handlePageSizeChange',
this.currentPage,
this.currentsize
);
},
pageChange(val) {
this.currentPage = val;
this.$emit(
'handlePageSizeChange',
this.currentPage,
this.currentsize
);
},
},
};
</script>
<style lang='scss' scoped>
::v-deep {
.el-input__inner {
height: 25px;
}
}
</style>
