新建一个组件
组件内容如下
<template>
<div class="pagination-pages">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="pageSizes"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
></el-pagination>
</div>
</template>
<script>
export default {
// 获取从父元素传递过来的数据
props: {
currentPage: {
type: Number,
default: () => {}
},
pageSizes: {
type: Array,
default: () => {}
},
pageSize: {
type: Number,
default: () => {}
},
total: {
type: Number,
default: () => {}
}
},
methods: {
/**
* 改变每页显示多少条数时,将数据传递给父元素
*/
handleSizeChange(val) {
this.$emit('sizeChange', val)
},
/**
* 改变当前第几页,将数据传递给父元素
*/
handleCurrentChange(val) {
this.$emit('currentChange', val)
}
}
}
</script>
在父级组件引入组件并注册
import pagination from '../pagination.vue'
export default {
components: {
pagination
}
}
在父组件使用分页组件并传递参数给分页组件
<pagination
:currentPage="queryInfo.pagenum"
:pageSizes="[1, 2, 5, 10]"
:pageSize="queryInfo.pagesize"
:total="total"
@sizeChange="sizeChange"
@currentChange="currentChange"
></pagination>
接收分页组件出发事件时传递的事件同时接收参数
sizeChange(val) {
this.queryInfo.pagesize = val
this.getUserList()
},
currentChange(val) {
this.queryInfo.pagenum = val
this.getUserList()
}