完善表格展示布局

This commit is contained in:
ChenYi 2025-07-10 15:33:21 +08:00
parent fb44ace832
commit f967080ccd

View File

@ -23,6 +23,9 @@ const { DeviceType, DeviceId, FocusAddress } = route.query;
//
const dynamicColumns = ref<any[]>([]);
//
const actualTotalCount = ref<number>(0);
// - IoTDBTreeModelDeviceDataDto
const fixedColumns = [
{ title: '序号', type: 'seq', width: 50 },
@ -86,6 +89,17 @@ const gridOptions: VxeGridProps<any> = {
pagerConfig: {
currentPage: 1,
pageSize: 20,
//
onChange: (currentPage: number, pageSize: number) => {
console.log('分页变化:', { currentPage, pageSize });
// pageSize
if (pageSize !== gridOptions.pagerConfig.pageSize) {
console.log('页面大小变化,重置到第一页');
// pageSize
gridOptions.pagerConfig.pageSize = pageSize;
gridOptions.pagerConfig.currentPage = 1;
}
},
},
toolbarConfig: {
custom: true,
@ -154,13 +168,50 @@ const gridOptions: VxeGridProps<any> = {
},
});
// totalCount
// APItotalCount使items
// APItotalCount
const currentPageSize = page.pageSize;
const currentItemsCount = data.items ? data.items.length : 0;
//
let estimatedTotalCount = 0;
// 使
if (page.currentPage === 1) {
if (currentItemsCount === currentPageSize) {
//
// 使
estimatedTotalCount = currentPageSize * 2;
} else {
//
estimatedTotalCount = currentItemsCount;
}
} else {
// 使
if (currentItemsCount === currentPageSize) {
//
estimatedTotalCount = page.currentPage * currentPageSize + currentPageSize;
} else {
//
estimatedTotalCount = (page.currentPage - 1) * currentPageSize + currentItemsCount;
}
}
//
estimatedTotalCount = Math.max(estimatedTotalCount, currentItemsCount);
//
if (currentItemsCount < currentPageSize) {
actualTotalCount.value = estimatedTotalCount;
console.log('更新缓存的实际总数:', estimatedTotalCount);
}
const result = {
items: data.items || [],
totalCount: data.items ? data.items.length : 0,
totalCount: estimatedTotalCount,
};
console.log('返回给表格的数据:', result);
console.log('估算总数:', result.totalCount, '当前页数据量:', result.items.length);
console.log('分页信息:', { currentPage: page.currentPage, pageSize: currentPageSize });
return result;
}
@ -179,6 +230,25 @@ const gridOptions: VxeGridProps<any> = {
};
const [Grid, gridApi] = useVbenVxeGrid({ formOptions, gridOptions });
//
watch(() => gridApi?.pagerApi?.currentPage, (newPage, oldPage) => {
console.log('当前页变化:', { newPage, oldPage });
});
watch(() => gridApi?.pagerApi?.pageSize, (newSize, oldSize) => {
console.log('页面大小变化:', { newSize, oldSize });
if (newSize !== oldSize && oldSize) {
console.log('页面大小从', oldSize, '变为', newSize, ',重置到第一页');
//
if (actualTotalCount.value > 0 && newSize > actualTotalCount.value) {
console.log('新页面大小大于缓存总数,清除缓存');
actualTotalCount.value = 0;
}
//
gridApi.pagerApi.currentPage = 1;
}
});
</script>
<template>