51 lines
1.1 KiB
Vue
51 lines
1.1 KiB
Vue
<template>
|
|
<div class="pagination">
|
|
<el-pagination
|
|
v-bind="props"
|
|
:pager-count="5"
|
|
v-model:currentPage="pager.page"
|
|
v-model:pageSize="pager.size"
|
|
:page-sizes="pageSizes"
|
|
:layout="layout"
|
|
:total="pager.count"
|
|
:hide-on-single-page="false"
|
|
@size-change="sizeChange"
|
|
@current-change="pageChange"
|
|
></el-pagination>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
interface Props {
|
|
modelValue?: Record<string, any>
|
|
pageSizes?: number[]
|
|
layout?: string
|
|
}
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
modelValue: () => ({}),
|
|
pageSizes: () => [15, 20, 30, 40],
|
|
layout: 'total, sizes, prev, pager, next, jumper'
|
|
})
|
|
|
|
const emit = defineEmits<{
|
|
(event: 'change'): void
|
|
(event: 'update:modelValue', value: any): void
|
|
}>()
|
|
|
|
const pager = computed({
|
|
get() {
|
|
return props.modelValue
|
|
},
|
|
set(value) {
|
|
emit('update:modelValue', value)
|
|
}
|
|
})
|
|
const sizeChange = () => {
|
|
pager.value.page = 1
|
|
emit('change')
|
|
}
|
|
const pageChange = () => {
|
|
emit('change')
|
|
}
|
|
</script>
|