记录pagination在改变pageSize的时候出现的问题

分页多用于table 表格，可以直接放在table的下面如下图所示。这里介绍的是element ui的分页功能，使用的是el-pagination。

需求是切换pageSize的时候回到第一页
于是有这个

const handleSizeChange = (size) => {
		pagination.value.pageSize = size
		pagination.value.currentPage = 1
	}

由于handleSizeChange是异步的，所以经常会导致没有回到第一页
所以加上nextTick

	const handleSizeChange = (size) => {
		pagination.value.pageSize = size
		nextTick(() => {
			pagination.value.currentPage = 1
		})
	}

这次问题是解决了，能顺利回到第一页，这时奇怪的事情就发生了，首先页面的表现为：先是无数据，然后过一会数据才加载。
打开控制台查看网络请求，发现获取了两次数据！
多方查阅资料得知：在改变pageSize时，若当前的currentPage超过了最大有效值，就会修改为最大有效值！
但是我的需求不是去最大值的页，而是改变pageSize就回到第一页
解决方案

watch(
		() => [pagination.value.currentPage, pagination.value.pageSize],
		(now_val, old_val) => {
			const [a, b] = now_val
			const [c, d] = old_val
			if (b === d && a !== c) {
				props.onPageChange({ page: pagination.value.currentPage, size: pagination.value.pageSize })
			}
		},
		{ deep: true }
	)

以下是我封装的vue3的elementui的分页组件全部代码

<!-- @format -->

<template>
	<div class="pagination">
		<el-pagination
			background
			:page-sizes="props.pageSizes"
			layout="total, prev, pager, next,sizes"
			:total="props.total"
			:current-page="pagination.currentPage"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
		/>
	</div>
</template>

<script setup>
	import { ref, watch, nextTick } from "vue"

	const pagination = ref({
		currentPage: 1,
		pageSize: 10,
	})
	const props = defineProps({
		onPageChange: {
			type: Function,
			default: ({ page, size }) => {},
		},
		total: {
			type: Array,
			default: 0,
		},
		pageSizes: {
			type: Number,
			default: [10, 15, 30, 50],
		},
	})
	watch(
		() => [pagination.value.currentPage, pagination.value.pageSize],
		(now_val, old_val) => {
			const [a, b] = now_val
			const [c, d] = old_val
			if (b === d && a !== c) {
				props.onPageChange({ page: pagination.value.currentPage, size: pagination.value.pageSize })
			}
		},
		{ deep: true }
	)
	const handleSizeChange = (size) => {
		pagination.value.pageSize = size
		nextTick(() => {
			pagination.value.currentPage = 1
		})
	}

	const handleCurrentChange = (page) => {
		pagination.value.currentPage = page
	}
	watch(
		() => props,
		(val) => {
			console.log(val, "val")
		},
		{ deep: true }
	)
</script>

<style lang="scss" scoped></style>

说明：使用的时候<Pagination :onPageChange="onPageChange" :total="total" /> 只需要传分页改变的事件和total

完！！

来了就留个言再走吧^_^