| 提交 | 用户 | 时间 | ||
| 820397 | 1 | <!-- 基于 ruoyi-vue3 的 Pagination 重构，核心是简化无用的属性，并使用 ts 重写 --> |
| H | 2 | <template> |
| 3 | <el-pagination | |
| 4 | v-show="total > 0" | |
| 5 | v-model:current-page="currentPage" | |
| 6 | v-model:page-size="pageSize" | |
| 7 | :background="true" | |
| 8 | :page-sizes="[10, 20, 30, 50, 100]" | |
| 9 | :pager-count="pagerCount" | |
| 10 | :total="total" | |
| 11 | :small="isSmall" | |
| 12 | class="float-right mb-15px mt-15px" | |
| 13 | layout="total, sizes, prev, pager, next, jumper" | |
| 14 | @size-change="handleSizeChange" | |
| 15 | @current-change="handleCurrentChange" | |
| 16 | /> | |
| 17 | </template> | |
| 18 | <script lang="ts" setup> | |
| 19 | import { computed, watchEffect } from 'vue' | |
| 20 | import { useAppStore } from '@/store/modules/app' | |
| 21 | ||
| 22 | defineOptions({ name: 'Pagination' }) | |
| 23 | ||
| 24 | // 此处解决了当全局size为small的时候分页组件样式太大的问题 | |
| 25 | const appStore = useAppStore() | |
| 26 | const layoutCurrentSize = computed(() => appStore.currentSize) | |
| 27 | const isSmall = ref<boolean>(layoutCurrentSize.value === 'small') | |
| 28 | watchEffect(() => { | |
| 29 | isSmall.value = layoutCurrentSize.value === 'small' | |
| 30 | }) | |
| 31 | ||
| 32 | const props = defineProps({ | |
| 33 | // 总条目数 | |
| 34 | total: { | |
| 35 | required: true, | |
| 36 | type: Number | |
| 37 | }, | |
| 38 | // 当前页数：pageNo | |
| 39 | page: { | |
| 40 | type: Number, | |
| 41 | default: 1 | |
| 42 | }, | |
| 43 | // 每页显示条目个数：pageSize | |
| 44 | limit: { | |
| 45 | type: Number, | |
| 46 | default: 20 | |
| 47 | }, | |
| 48 | // 设置最大页码按钮数。 页码按钮的数量，当总页数超过该值时会折叠 | |
| 49 | // 移动端页码按钮的数量端默认值 5 | |
| 50 | pagerCount: { | |
| 51 | type: Number, | |
| 52 | default: document.body.clientWidth < 992 ? 5 : 7 | |
| 53 | } | |
| 54 | }) | |
| 55 | ||
| 56 | const emit = defineEmits(['update:page', 'update:limit', 'pagination']) | |
| 57 | const currentPage = computed({ | |
| 58 | get() { | |
| 59 | return props.page | |
| 60 | }, | |
| 61 | set(val) { | |
| 62 | // 触发 update:page 事件，更新 limit 属性，从而更新 pageNo | |
| 63 | emit('update:page', val) | |
| 64 | } | |
| 65 | }) | |
| 66 | const pageSize = computed({ | |
| 67 | get() { | |
| 68 | return props.limit | |
| 69 | }, | |
| 70 | set(val) { | |
| 71 | // 触发 update:limit 事件，更新 limit 属性，从而更新 pageSize | |
| 72 | emit('update:limit', val) | |
| 73 | } | |
| 74 | }) | |
| 75 | const handleSizeChange = (val) => { | |
| 76 | // 如果修改后超过最大页面，强制跳转到第 1 页 | |
| 77 | if (currentPage.value * val > props.total) { | |
| 78 | currentPage.value = 1 | |
| 79 | } | |
| 80 | // 触发 pagination 事件，重新加载列表 | |
| 81 | emit('pagination', { page: currentPage.value, limit: val }) | |
| 82 | } | |
| 83 | const handleCurrentChange = (val) => { | |
| 84 | // 触发 pagination 事件，重新加载列表 | |
| 85 | emit('pagination', { page: val, limit: pageSize.value }) | |
| 86 | } | |
| 87 | </script> | |
