product-inventory-management.git

¶Ô±ÈÐÂÎÄ¼þ
			@@ -0,0 +1,105 @@
			<template>
			<div :class="{ 'hidden': hidden }" class="pagination-container">
			<el-pagination
			:background="background"
			v-model:current-page="currentPage"
			v-model:page-size="pageSize"
			:layout="layout"
			:page-sizes="pageSizes"
			:pager-count="pagerCount"
			:total="total"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			/>
			</div>
			</template>

			<script setup>
			import { scrollTo } from '@/utils/scroll-to'

			const props = defineProps({
			total: {
			required: true,
			type: Number
			},
			page: {
			type: Number,
			default: 1
			},
			limit: {
			type: Number,
			default: 20
			},
			pageSizes: {
			type: Array,
			default() {
			return [10, 20, 30, 50]
			}
			},
			// ç§»å¨ç«¯é¡µç æé®çæ°éç«¯é»è®¤å¼5
			pagerCount: {
			type: Number,
			default: document.body.clientWidth < 992 ? 5 : 7
			},
			layout: {
			type: String,
			default: 'total, sizes, prev, pager, next, jumper'
			},
			background: {
			type: Boolean,
			default: true
			},
			autoScroll: {
			type: Boolean,
			default: true
			},
			hidden: {
			type: Boolean,
			default: false
			}
			})

			const emit = defineEmits()
			const currentPage = computed({
			get() {
			return props.page
			},
			set(val) {
			emit('update:page', val)
			}
			})
			const pageSize = computed({
			get() {
			return props.limit
			},
			set(val){
			emit('update:limit', val)
			}
			})

			function handleSizeChange(val) {
			if (currentPage.value * val > props.total) {
			currentPage.value = 1
			}
			emit('pagination', { page: currentPage.value, limit: val })
			if (props.autoScroll) {
			scrollTo(0, 800)
			}
			}

			function handleCurrentChange(val) {
			emit('pagination', { page: val, limit: pageSize.value })
			if (props.autoScroll) {
			scrollTo(0, 800)
			}
			}
			</script>

			<style scoped>
			.pagination-container {
			background: #fff;
			}
			.pagination-container.hidden {
			display: none;
			}
			</style>