You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
64 lines
1.4 KiB
64 lines
1.4 KiB
<template>
|
|
|
|
<div class="flex justify-center">
|
|
<el-button :disabled="current === 1 || total === 0" @click="changePage('prev')">上一页</el-button>
|
|
<el-pagination
|
|
:current-page="current"
|
|
@current-change="onChangePage"
|
|
background
|
|
:page-size="limit"
|
|
layout="pager"
|
|
:total="total">
|
|
</el-pagination>
|
|
<el-button :disabled="current === pages || total === 0" @click="changePage('next')">下一页</el-button>
|
|
<el-pagination
|
|
class="ml-2"
|
|
:current-page="current"
|
|
@current-change="onChangePage"
|
|
background
|
|
:page-size="limit"
|
|
layout="jumper"
|
|
:total="total">
|
|
</el-pagination>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps(['total', 'current', 'pages', 'limit'])
|
|
const emits = defineEmits(['change'])
|
|
|
|
function onChangePage(val:number) {
|
|
console.log('val>>>>>>>>>>>>>>', val)
|
|
emits('change', val)
|
|
}
|
|
function changePage(flag: 'next'|'prev'):void {
|
|
if(flag === 'next') {
|
|
if (props.current >= props.pages) return;
|
|
else {
|
|
onChangePage(props.current + 1)
|
|
}
|
|
}else if(flag === 'prev') {
|
|
if (props.current <= 1) return;
|
|
else {
|
|
onChangePage(props.current - 1)
|
|
}
|
|
}
|
|
}
|
|
// emit
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
:deep(.el-pagination) {
|
|
.el-pager {
|
|
.number {
|
|
margin: 0 5px;
|
|
}
|
|
.number.is-active {
|
|
background-color: #022950;
|
|
@apply text-base;
|
|
}
|
|
}
|
|
}
|
|
</style>
|