Vue3分页组件异常：无法接收API返回的totalPage值

核心问题 #

你使用的是Ant Design Vue的a-pagination组件，它的total属性代表总数据条数，组件会根据page-size（每页显示条数）自动计算总页数。你的代码存在两个关键问题：

• 分页组件未指定page-size，默认使用10，但你请求数据时用的是limit:7，导致组件计算的总页数和实际逻辑不符；
• totalPage初始值为undefined，可能导致组件初始渲染时无法正确识别数值类型。

具体修复步骤 #

1. 给分页组件添加page-size属性
   对应请求参数里的limit:7，给a-pagination加上:page-size="7"，让组件明确每页显示7条数据，这样就能用total（总条数）正确计算总页数：

   <a-pagination
     v-if="!loading"
     @change="pagination"
     v-model:current="current"
     :total="totalPage"
     :page-size="7"
     show-less-items
   />
   

2. 初始化totalPage为数字类型
   将totalPage的初始值设为0，避免undefined带来的类型识别问题：

   const totalPage = ref<number>(0);
   

3. 补全loading变量的声明
   代码中使用了v-if="!loading"但未声明loading，需要补上：

   const loading = ref(true);
   

4. （可选）确保count是数字类型
   虽然控制台打印正常，但如果API返回的count是字符串类型，需要转成数字：

   totalPage.value = Number(fileData.data.count);
   

修改后的完整Script示例 #

<script setup lang="ts">
const totalPage = ref<number>(0);
const current = ref(1);
const loading = ref(true); // 补全loading声明
const files = ref([]); // 确保files变量已声明
// 其他变量如searchName、stateStatus等需确保已定义

async function getFile(page = 1) {
  try {
    loading.value = true; // 请求开始时开启loading
    const fileData = await request.get("api/admin/file/list", {
      params: {
        page,
        limit: 7,
        name: searchName.value.trim(),
        status: stateStatus.value,
        mimetype: typeFile.value,
        lte_size: endSize.value,
        gte_size: startSize.value,
      },
    });
    files.value = fileData.data.data;
    totalPage.value = Number(fileData.data.count); // 确保转为数字类型
    console.log("Tổng trang:", totalPage.value)
  } catch (e) {
    console.log(e);
  } finally {
    loading.value = false; // 请求结束后关闭loading
  }
}

onMounted(async () => {
  await getFile();
});

async function pagination(pageNumber: number) {
  current.value = pageNumber;
  files.value = [];
  await getFile(pageNumber);
}
</script>

内容的提问来源于stack exchange，提问作者Nguyễn Thế Hưng