|
|
<!-- 基于 ruoyi-vue3 的 Pagination 重构，核心是简化无用的属性，并使用 ts 重写 -->
|
|
|
<template>
|
|
|
<el-pagination
|
|
|
v-show="total > 0"
|
|
|
v-model:current-page="currentPage"
|
|
|
v-model:page-size="pageSize"
|
|
|
:background="true"
|
|
|
:page-sizes="[10, 20, 30, 50, 100]"
|
|
|
:pager-count="pagerCount"
|
|
|
:total="total"
|
|
|
class="float-right mt-15px mb-15px"
|
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
|
@size-change="handleSizeChange"
|
|
|
@current-change="handleCurrentChange"
|
|
|
/>
|
|
|
</template>
|
|
|
<script lang="ts" setup>
|
|
|
import { computed } from 'vue'
|
|
|
|
|
|
defineOptions({ name: 'Pagination' })
|
|
|
|
|
|
const props = defineProps({
|
|
|
// 总条目数
|
|
|
total: {
|
|
|
required: true,
|
|
|
type: Number
|
|
|
},
|
|
|
// 当前页数：pageNo
|
|
|
page: {
|
|
|
type: Number,
|
|
|
default: 1
|
|
|
},
|
|
|
// 每页显示条目个数：pageSize
|
|
|
limit: {
|
|
|
type: Number,
|
|
|
default: 20
|
|
|
},
|
|
|
// 设置最大页码按钮数。 页码按钮的数量，当总页数超过该值时会折叠
|
|
|
// 移动端页码按钮的数量端默认值 5
|
|
|
pagerCount: {
|
|
|
type: Number,
|
|
|
default: document.body.clientWidth < 992 ? 5 : 7
|
|
|
}
|
|
|
})
|
|
|
|
|
|
const emit = defineEmits(['update:page', 'update:limit', 'pagination', 'pagination'])
|
|
|
const currentPage = computed({
|
|
|
get() {
|
|
|
return props.page
|
|
|
},
|
|
|
set(val) {
|
|
|
// 触发 update:page 事件，更新 limit 属性，从而更新 pageNo
|
|
|
emit('update:page', val)
|
|
|
}
|
|
|
})
|
|
|
const pageSize = computed({
|
|
|
get() {
|
|
|
return props.limit
|
|
|
},
|
|
|
set(val) {
|
|
|
// 触发 update:limit 事件，更新 limit 属性，从而更新 pageSize
|
|
|
emit('update:limit', val)
|
|
|
}
|
|
|
})
|
|
|
const handleSizeChange = (val) => {
|
|
|
// 如果修改后超过最大页面，强制跳转到第 1 页
|
|
|
if (currentPage.value * val > props.total) {
|
|
|
currentPage.value = 1
|
|
|
}
|
|
|
// 触发 pagination 事件，重新加载列表
|
|
|
emit('pagination', { page: currentPage.value, limit: val })
|
|
|
}
|
|
|
const handleCurrentChange = (val) => {
|
|
|
// 触发 pagination 事件，重新加载列表
|
|
|
emit('pagination', { page: val, limit: pageSize.value })
|
|
|
}
|
|
|
</script>
|