element-puls分页el-pagination二次封装

 简单二次封装 el-pagination,与原来基本一样,

但可以定义设置默认属,并且统一css样式,书写重复样式

二次封装 el-pagination ,模板 + js+ css 统一样式

<template>
	<div class="pagination">
		<el-pagination
			v-model:current-page="thisCurrentPage"
			v-model:page-size="thisPageSize"
			:total="total"
			:pager-count="count"
			:page-sizes="prop.pageSizes"
			layout="total, sizes, prev, pager, next, jumper"
			popper-class="paddingLR-0" />
	</div>
</template>
<script setup lang="ts">
interface props {
	currentPage: number;
	pageSize: number;
	total: number;
	count?: number;
	pageSizes?: number[];
}
// props默认值
let prop = withDefaults(defineProps<props>(), {
	pageSizes: [10, 50, 100, 200, 500] as any,
});
// emits默认值
const emit = defineEmits<{
	(e: "update:currentPage", value: number): void;
	(e: "update:pageSize", value: number): void;
	//返回第几到第几条  { currentPage, pageSize }   都是number值
	(e: "changePage", { currentPage, pageSize }: { [x: string]: number }): void;
}>();
let { total, count } = toRefs(prop);
// 当前页数
const thisCurrentPage = computed({
	get() {
		return prop.currentPage;
	},
	set(value) {
		emit("update:currentPage", value);
	},
});
// 每页显示条目个数
const thisPageSize = computed({
	get() {
		return prop.pageSize;
	},
	set(value) {
		emit("update:pageSize", value);
	},
});
watchEffect(() => {
	emit("changePage", {
		startIndex: prop.currentPage * prop.pageSize - prop.pageSize,
		endIndex: prop.currentPage * prop.pageSize - 1,
	});
});
</script>
<style lang="scss" scoped>
.pagination {
	overflow: hidden;
	padding: 20px 10px;
}
</style>

在父组件使用

<template>
    <div class="box">
        <!-- table组件... -->
        <!-- 使用二次封装的ElPagination -->
        <myElPagination 
            v-model:currentPage="currentPage" 
            v-model:pageSize="pageSize" 
            :total="total" 
            @change-page="changePage">
        </myElPagination>
    </div>
</template>
<script setup lang='ts'>
import myElPagination from '@/components/my-el-pagination.vue';


let currentPage = ref(1); // 当前页数
let pageSize = ref(50); // 每页显示条目个数
let total = ref(1000); // 总条目数 这条是死数据,实际是要拿到数据的数量的
//返回第几到第几条
const changePage =({startIndex, endIndex}:any)=>{
	console.log(startIndex, endIndex);
}
</script>