111 lines
2.5 KiB
Vue
111 lines
2.5 KiB
Vue
<template>
|
||
<div class="pagination-container">
|
||
<el-pagination
|
||
style="width: auto;"
|
||
v-model:current-page="currentPage"
|
||
v-model:page-size="pageSize"
|
||
:page-sizes="pageSizes"
|
||
:total="total"
|
||
:disabled="disabled"
|
||
:background="background"
|
||
size="small"
|
||
:layout="layout"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
// 定义组件接收的属性
|
||
const props = defineProps({
|
||
// 当前页码（双向绑定）
|
||
modelValue: {
|
||
type: Number,
|
||
required: true,
|
||
default: 1,
|
||
},
|
||
// 每页显示条数（双向绑定）
|
||
pageSizeValue: {
|
||
type: Number,
|
||
required: true,
|
||
default: 10,
|
||
},
|
||
// 总数据条数
|
||
total: {
|
||
type: Number,
|
||
required: true,
|
||
default: 0,
|
||
},
|
||
// 可选的每页条数
|
||
pageSizes: {
|
||
type: Array as PropType<number[]>,
|
||
default: () => [1, 10, 20, 50, 100] as unknown[],
|
||
},
|
||
// 是否禁用分页
|
||
disabled: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
// 是否显示分页背景
|
||
background: {
|
||
type: Boolean,
|
||
default: true,
|
||
},
|
||
// 分页布局（Element Plus 原生配置）
|
||
layout: {
|
||
type: String,
|
||
default: 'total, sizes, prev, pager, next, jumper',
|
||
},
|
||
})
|
||
|
||
// 定义派发的事件
|
||
const emit = defineEmits([
|
||
// 页码变更事件（v-model 双向绑定）
|
||
'update:modelValue',
|
||
// 每页条数变更事件（v-model 双向绑定）
|
||
'update:pageSizeValue',
|
||
// 分页变更统一回调（方便父组件处理）
|
||
'pagination-change',
|
||
])
|
||
|
||
// 内部当前页（同步props）
|
||
const currentPage = computed({
|
||
get: () => props.modelValue,
|
||
set: (val: number) => emit('update:modelValue', val),
|
||
})
|
||
// 内部每页条数（同步props）
|
||
const pageSize = computed({
|
||
get: () => props.pageSizeValue,
|
||
set: (val: number) => emit('update:pageSizeValue', val),
|
||
})
|
||
|
||
// 每页条数变更处理
|
||
const handleSizeChange = (val: number) => {
|
||
emit('update:pageSizeValue', val)
|
||
emit('pagination-change', { currentPage: currentPage.value, pageSize: val })
|
||
}
|
||
|
||
// 当前页变更处理
|
||
const handleCurrentChange = (val: number) => {
|
||
emit('update:modelValue', val)
|
||
emit('pagination-change', { currentPage: val, pageSize: pageSize.value })
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.pagination-container {
|
||
// position: fixed;
|
||
// bottom: 20px;
|
||
// float: right;
|
||
width: 100%;
|
||
display: flex;
|
||
padding: 10px 10px 0px 10px;
|
||
background-color: #fff;
|
||
justify-content: flex-end;
|
||
align-items: flex-end;
|
||
// right: 20px;
|
||
// z-index: 1000;
|
||
}
|
||
</style>
|