使用须知：基于项目内已安装vue2+eleme-ui， 则可以百分百直接套用，使用简介明了！！
一、封装component组件
-
component/Pagination/index.js
</** * 分页组件 */
<template>
<el-pagination
class="page-box"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
background
:current-page="childMsg.currentPage"
:page-sizes="[10, 20, 30, 40]"
:page-size="childMsg.pageSize"
layout="total, sizes, prev, pager, next"
:total="childMsg.total"
>
<!-- layout="total, sizes, prev, pager, next, jumper" -->
</el-pagination>
</template>
<script>
export default {
name: "Pagination",
props: ["childMsg"],
data() {
return {
pageparm: {
currentPage: this.childMsg.currentPage,
pageSize: this.childMsg.pageSize,
},
};
},
created() {},
methods: {
handleSizeChange(val) {
/**
* 子传父
* 参数1 父元素方法
* 参数2 数据
*/
this.pageparm.pageSize = val;
this.$emit("callFather", this.pageparm);
},
handleCurrentChange(val) {
console.log(val);
/**
* 子传父
* 参数1 父元素方法
* 参数2 数据
*/
this.pageparm.currentPage = val;
this.$emit("callFather", this.pageparm);
},
},
};
</script>
<style>
.page-box {
margin: 10px auto;
}
</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>
三、分页图效果展示
感谢您的阅读，如有帮到您，可以给文章点个赞！