从您提供的代码来看,问题出在如何设置 totalRecords
变量。您的 queryTable
函数中这样处理了响应的数据:
CollectionRecord(params)
.then((response) => {
data.value = response.data
totalRecords.value = response.data.length || 0 // 设置总记录数
})
如果 response.data
是一个空数组(即没有数据),则 response.data.length
会返回 0
,而通过逻辑或运算符 (||
) 的方式确保总记录数为 0
是没问题的。
但是在 Ant Design Vue 的表格组件中,它通常需要用到数据的总记录数来正确显示分页信息。因此,如果后端 API 返回的数据为空时,您应该确保也更新这个值。
如果在分页信息上仍然显示“1-1条记录,共一条记录”,而不是“0”,可能是因为前端组件并不完全理解当前没有数据的状态。这可能和初始化状态有关。
要解决这个问题,可以考虑以下步骤:
确保在请求数据之前,先将
data.value
和totalRecords.value
初始化为合适的值:const queryTable = () => {
// 初始化数据和总数
data.value = []
totalRecords.value = 0
const params = {
draw: 1,
length: pageSize.value,
order: [1],
search: { regex: false, value: '' },
searchParams: {
custId: 'A10101',
date: formState.date,
dateEnd: formState.dateEnd,
importDate: formState.importDate,
importDateEnd: formState.importDateEnd
},
start: 0
}
CollectionRecord(params)
.then((response) => {
data.value = response.data || []
totalRecords.value = response.totalCount || 0 // 应该根据后端返回的总数来设置
})
.catch((error) => {
console.error('请求失败:', error)
data.value = [] // 请求失败时也清空数据数组
totalRecords.value = 0 // 并确保总记录数为0
})
}
确保你的 API 返回的数据格式包含用于表示总记录数的信息。如果只返回了当前页的数据,那么你可能还需要另一个字段来提供所有可用数据的数量,以便于支持分页。然后使用这个字段来赋值给
totalRecords
.确保每次查询的时候都能够重新拉取最新的数据,并更新到表格。
通过这些步骤,应当可以正常处理没有数据时分页显示的问题。
内容由零声教学AI助手提供,问题来源于学员提问