在你的代码中,分页组件显示的记录范围是通过 showTotal
函数来定义的,具体取决于 totalRecords
和当前页面的数据长度。如果你发现即使没有数据展示仍然显示为 1~2
的原因可能有几个:
- Pagination 设置: 你在 pagination 中将
data-source
设置为data.length > 0 ? data : [{}]
。这意味着如果没有数据,表格会显示一行空白记录,这样可能导致总记录数和页码计算不一致。
:data-source="data.length > 0 ? data : [{}]"
如果 data
是空数组,则会返回 [{}]
,这会被认为是一个有效的表格行,但内容是空的。因此,如果没有实际的数据,它仍然可以显示一些记录。
总记录数 (totalRecords): 确保 API 返回的总记录数(例如:recordsFiltered)与实际数据相匹配。如果 API 在没有实际数据时返回了一个大于零的 totalRecords,这也会导致分页组件错误地计算出范围。
Pagination 的逻辑: 在处理分页逻辑时,如果请求到的数据为空且你依旧希望控制分页,则可以考虑修改逻辑,仅在存在有效数据时才更新 totalRecords。可以添加判断条件,以确保总记录数只在获取到有效数据时进行更新。
解决方法建议:
- 修改
data-source
的设置,以避免无效行:
:data-source="data.length > 0 ? data : []"
检查从服务器返回的
recordsFiltered
值,确保其符合预期。在请求成功后,根据实际返回值更新你的总记录数。
示例调整如下:
const queryTable = () => {
// ... existing code ...
CollectionRecord(params)
.then((response) => {
data.value = response.data;
if (response.recordsFiltered !== undefined) {
totalRecords.value = response.recordsFiltered;
} else {
totalRecords.value = response.data.length; // 或者根据需要设定为0
}
})
.catch((error) => console.error('请求失败:', error));
};
通过以上调整,你应该能够正确管理当没有数据显示时分页的信息。
内容由零声教学AI助手提供,问题来源于学员提问