当前位置：首页 > news >正文

分页器封装

news 2025/6/26 9:29:10

项目场景：

提示：这里简述项目相关背景：

在做项目中，我们对于一般的element组件使用时都会进行二次封装，这个就是对分页器的封装

方案：

提示：这里填写该问题的具体解决方案：

1：组件

<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":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: 10},pageSizes: {type: Array,default() {return [10, 20, 30, 50]}},// 移动端页码按钮的数量端默认值5pagerCount: {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>

2：使用

<Pagination:total="pageData.total":limit="pageData.pageSize":page="pageData.currentPage"@pagination="changePage"/>//引入组件
import Pagination from '@/components/Pagination/index.vue'// 页码切换
const pageData=reactive({currentPage:1,pageSize:10,total:100,
})
// 修改页码 与当前页
const changePage=(val)=>{pageData.currentPage=val.page;pageData.pageSize=val.limit;console.log("ccccccccccccccccccccccccc",val)getTableList();//获取页码更新后数据
}