Element Plus分页组件
2023.07.12
问题描述
Element Plus 中的分页组件（el-pagination）在当前页为最后一页，选择较大的每页展示数时，除了触发 size-change 事件，还触发了 current-change 事件。
demo地址：Element Plus Playground
vue
<template>
<el-pagination
:current-page="currentPage"
:page-size="pageSize"
:total="total"
background
layout="total, prev, pager, next, sizes"
@update:current-page="handleChangePage"
@update:page-size="handleChangeSize"
/>
</template>
<script setup>
import { ref } from 'vue';
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(50);
function handleChangePage(val) {
console.log('当前页数改变了', val);
currentPage.value = val;
getList(val, pageSize.value);
}
function handleChangeSize(val) {
console.log('每页展示数改变了', val);
pageSize.value = val;
getList(currentPage.value, val);
}
function getList(page, size) {
console.log(`调用接口了, page: ${page}, size: ${size}`);
return Promise.resolve([page, size]);
}
</script>解决过程与方案
我在 github 上找到了对应的 issue，但根据回复，这是属于组件合理的表现，那么只能自己来处理这块逻辑了。
问题的本质是，在每页展示数变大时，触发了 size-change 事件，同时当前页数超过了最大有效页数，分页组件内部修改了当前页数为最大有效页数，从而也触发了 current-change 事件。
知道了原因，那么修改当前页数为最大有效页数这件事我们自己做，就能避免出现问题。
代码如下：
vue
<template>
<el-pagination :current-page="currentPage" :page-size="pageSize" :total="total" background
layout="total, prev, pager, next, sizes" @update:current-page="handleChangePage"
@update:page-size="handleChangeSize" />
</template>
<script setup>
import { ref, watch } from 'vue';
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(50);
function handleChangePage(val) {
console.log('当前页数改变了', val);
currentPage.value = val;
// getList(val, pageSize.value);
}
function handleChangeSize(val) {
console.log('每页展示数改变了', val);
pageSize.value = val;
// 注意这里要使用val，而不是pageSize.value，因为vue的数据更新是异步的
// 当前页数超出最大有效页数时，重置当前页数为最大有效页数
if (currentPage.value * val > total.value) {
const validPage = Math.ceil(total.value / val);
currentPage.value = validPage;
}
// getList(currentPage.value, val);
}
function getList(page, size) {
console.log(`调用接口了, page: ${page}, size: ${size}`);
return Promise.resolve([page, size]);
}
// 为了方便，使用watch一起监听当前页数和每页展示数
watch([currentPage, pageSize], ([newCurrentPage, newPageSize]) => {
getList(newCurrentPage, newPageSize);
})
</script>