vue2环境:
封装的分页器组件如下:
如需样式不同,可自己做穿透,手动调整
<template>
<div class="pagination-container">
<el-pagination
:current-page.sync="currentPage"
:page-size.sync="pageSize"
:layout="layout"
:page-sizes="pageSizes"
: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: 10
},
//选择每页显示的条数
pageSizes: {
type: Array,
default() {
return [10, 20, 50, 100]
}
},
//组件布局,展示的功能
layout: {
type: String,
default: 'total, sizes, prev, pager, next, jumper'
}
},
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) {
this.$emit('pagination', { page: this.currentPage, limit: val })
},
//页数改变时触发
handleCurrentChange(val) {
this.$emit('pagination', { page: val, limit: this.pageSize })
}
}
}
</script>
<style scoped>
</style>
引用:
<pagination
v-if="totalRows > 0"
:total="totalRows"
:page.sync="curPage"
:limit.sync="rows"
@pagination="handleQuery"
/>
vue3环境:
封装的分页器组件如下:
如需样式不同,可自己做穿透,手动调整
<template>
<div class="pagination-wrap">
<el-pagination
layout="total, sizes,prev,pager,next, jumper"
:total="total"
:default-page-size="row"
background
@size-change="sizeChange"
@current-change="currentChange"
/>
</div>
</template>
<script setup lang="ts">
defineProps({
current: {
type: Number,
default: 1
},
row: {
type: Number,
default: 10
},
total: {
type: Number,
default: 0
}
})
const emit = defineEmits(['update:current', 'update:row', 'pagination'])
// 每页数量进行修改时
const sizeChange = ($event) => {
emit('update:row', $event)
nextTick(() => {
return emit('pagination')
})
}
// 当前页数触发修改时
const currentChange = ($event) => {
emit('update:current', $event)
nextTick(() => {
return emit('pagination')
})
}
</script>
<style lang="less" scoped>
.pagination-wrap {
margin-top: 20px;
display: flex;
justify-content: flex-end;
:deep(.el-pagination .el-pager li.is-active) {
background: #409eff;
}
}
</style>
引用:
<Pagination
v-if="total > 0"
v-model:current="pageNum"
v-model:row="pageSize"
:total="total"
@pagination="handleQuery"
/>