使用须知:基于项目内已安装vue2+eleme-ui, 则可以百分百直接套用,使用简介明了!!
一、封装component组件
-
component/Pagination/index.js
<template>
<div :class="{ hidden: hidden }" class="pagination-container">
<el-pagination
:background="background"
:current-page.sync="currentPage"
:page-size.sync="pageSize"
:layout="layout"
:page-sizes="pageSizes"
:pager-count="pagerCount"
:total="total"
v-bind="$attrs"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</template>
<script>
export default {
name: 'Pagination',
props: {
total: {
required: true,
type: Number,
},
page: {
type: Number,
default: 1,
},
limit: {
type: Number,
default: 20,
},
pageSizes: {
type: Array,
default() {
return [10, 20, 30, 50];
},
},
// 移动端页码按钮的数量端默认值5
pagerCount: {
type: Number,
default: document.body.clientWidth < 992 ? 5 : 7,
},
layout: {
type: String,
default: 'total, sizes, prev, pager, next, jumper',
},
background: {
type: Boolean,
default: true,
},
autoScroll: {
type: Boolean,
default: true,
},
hidden: {
type: Boolean,
default: false,
},
},
data() {
return {};
},
computed: {
currentPage: {
get() {
return this.page;
},
set(val) {
this.$emit('update:page', val);
},
},
pageSize: {
get() {
return this.limit;
},
set(val) {
this.$emit('update:limit', val);
},
},
},
methods: {
handleSizeChange(val) {
if (this.currentPage * val > this.total) {
this.currentPage = 1;
}
this.$emit('pagination', { page: this.currentPage, limit: val });
},
handleCurrentChange(val) {
this.$emit('pagination', { page: val, limit: this.pageSize });
},
},
};
</script>
<style scoped>
.pagination-container {
background: #fff;
padding: 32px 16px;
}
.pagination-container.hidden {
display: none;
}
</style>
二、调用封装的组件
引入、注册、调用方式
// 分页参数配置
pageParam: {
currentPage: 1, // 当前页码,默认为第1页
pageSize: 10, // 每页显示的数据条数,默认为10条
total: 10, // 数据总条数,用于计算总页数
},
// 分页插件事件
callFather(parm) { }
<template>
<div>
<!-- 分页组件 -->
<Pagination v-bind:child-msg="pageparm" @callFather="callFather" v-bind:total="pageparm.total"></Pagination>
</div>
</template>
import Pagination from '@/layout/component/Pagination'; //引入
<script>
export default {
name: 'demo',
components: {
Pagination, //注册
},
data() {
return {
pageparm: {
currentPage: 1,
pageSize: 10,
total: 10,
},
};
},
methods(){
// 分页插件事件
callFather(parm) { }
}
};
</script>
三、分页图效果展示
感谢您的阅读,如有帮到您,可以给文章点个赞!