vue Pagination 分页
代码实现
1.封装的子组件代码:
<template>
<div>
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNun"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {};
},
props: ["pageNun", "pageSize", "total"],
methods: {
// 每页条数点击事件
handleSizeChange(e) {
this.$emit("pageSizeChange", e);
},
//页码点击事件
handleCurrentChange(e) {
this.$emit("pageNumChange", e);
},
},
};
</script>
.父组件中对子组件的引用
引入子组件