2024-12-16
20171129101345836.gif
前端数据量大的时候,点击最后一个分页, 会自动触发循环加载接口.
怎么解决问题
我这边从3个方面解决.
- 节流
<pagination
v-show="pageConfig.total > 0"
:total="pageConfig.total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="handlePagination"
:showLastPage='false'
:pageSizes="[10, 30, 50, 100, 300, 500, 1000, 1500, 2000, 2500, 3000, 5000]"
/>
点击分页的时候, 节流
const handlePagination = throttle(function (val) {
getList();
}, 1000);
-
第二种方案是loading 拦截
image.png 第三种方案是隐藏最大的页码
:showLastPage='false'
使用配置+js逻辑隐藏, 或者直接用css 隐藏.
watch(
() => props.total,
nValue => {
if (nValue >= 3000 && !props.showLastPage) {
handleRemoveLast();
}
}
);
function handleRemoveLast() {
nextTick(() => {
const boxDom = pageIntionRef.value?.$el;
const pageList = boxDom.querySelectorAll('.el-pager .number');
const lastNumber = pageList[pageList.length - 1];
lastNumber && (lastNumber.style.display = 'none');
});
}
.el-pager{
li:last-child{
display:none;
}
}
