从您提供的代码来看，问题出在如何设置 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助手提供，问题来源于学员提问
![make[5]: Entering directory `/home/onvif/gsoap_2.8.116/gsoap-2.8/gsoap/wsdl'
g++ -DWSDL2H_IMPORT_PATH=](https://linuxcpp.0voice.com/zb_users/upload/2023/05/202305162234068218239.png)
![0 ? data :[{}]":scrol1l="{x:'max-content'}
:pagination="{
pageSize: pageSize,
showSizeChanger: true,
onShowSiz...](https://linuxcpp.0voice.com/zb_users/upload/2023/05/202305162214216277121.png)
![make[5]: Entering directory `/home/onvif/gsoap_2.8.116/gsoap-2.8/gsoap/wsdl'
g++ -I/usr/lib64/include -DWITH_OPENSSL -DWITH_GZIP -DWSDL2H_IMPORT_PATH=](https://linuxcpp.0voice.com/zb_users/upload/2023/05/202305162217459776743.png)
