1.使用方法在main中引入import Pagination from '@/components/Pagination',然后全局挂载:app.component('Pagination', Pagination)
2.页面中使用:<pagination :total="total" v-model:page="obj.page" v-model:limit="obj.limit" @pagination="getList" />,total:总数,page:当前页:limit:条数,@pagination="获取列表的方法"
<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>
/* 未点击时的数字方块背景颜色 */
:deep(.el-pagination .el-pager li:not(.active):not(.disabled)) {
background-color: #fff !important;
color: #000;
border: 1px solid #ccc;
}
:deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
/* //修改默认的背景色 */
background-color: #6954D5 !important;
border: 1px solid #6954D5;
color: #fff;
}
/* // prev和next箭头的样式 */
::v-deep(.el-pagination .btn-next),
::v-deep(.el-pagination .btn-prev) {
background: transparent !important;
background-color: transparent !important;
}
/* // prev和next箭头disabled的样式 */
::v-deep(.el-pagination button:disabled) {
background-color: transparent !important;
}
::v-deep(.el-select .el-input__inner){
color: #6954D5;
}
::v-deep(.el-pagination .el-input__inner ){
color: #6954D5 !important;
}
.pagination-container {
background: #fff;
padding: 32px 16px;
display: flex;
align-items: center;
}
.pagination-container.hidden {
display: none;
}
.totalClass{
position: absolute;
right:450px;
font-family:PingFangSC, PingFang SC;
color:rgba(0,0,0,0.6);
}
</style>