[Need Help] 关于 usePagination的疑问

[like0413]

问题描述 Problem Description

我按照ant design 的示例：

<script lang="ts" setup>
import type { TableProps } from 'ant-design-vue'
import { getDemoTable } from '@/api/demo'

const columns = []

const {
  data,
  run,
  loading,
  current,
  pageSize,
  total
} = usePagination(getDemoTable, {
  pagination: {
    currentKey: 'ext.page',
    pageSizeKey: 'ext.size',
    totalKey: 'ext.total',
  },
})
const dataSource = computed(() => data.value?.list ?? [])

const pagination = computed(() => ({
  total: total.value,
  current: current.value,
  pageSize: pageSize.value,
}))

const onTableChange: TableProps['onChange'] = (pag, filters, sorter) => {
  run({
    page: pag.current,
    size: pag.pageSize,
    sorter: sorter,
    ...filters,
  })
}
</script>

<template>
  <a-table
    :row-key="(record) => record.id"
    :columns="columns"
    :data-source="dataSource"
    :pagination="pagination"
    :loading="loading"
    @change="onTableChange"
  ></a-table>
</template>

<style scoped lang="scss"></style>

这是接口的返回结构：

我的疑惑：
初次时参数是这样的：

点击分页时是这样的：

我不太理解初次的传参为什么是这样

其他信息 Other information

[John60676]

currentKey 和 pageSizeKey 在你这个例子中应该填的是 'page' 和 'size'，它们是 getDemoTable 请求函数的形参名

[like0413]

currentKey 和 pageSizeKey 在你这个例子中应该填的是 'page' 和 'size'，它们是 getDemoTable 请求函数的形参名

如果填 'page' 和 'size'，就不匹配我的返回值了，值是在ext里的

[John60676]

匹配的是接口的入参，不是返回值

[shaoerkuai]

currentKey 和 pageSizeKey 是入参，返回值是totalKey和totalPageKey。
如果你放ext，应该是totalKey = data.data.ext.total totalPageKey以此类推。
pageno 和 size，不需要从你的接口返回去读的，这个是用的请求的参数+返回的total来进行计算的，确保分页能访问到响应体ext.total的字段即可。

[like0413]

感谢。文档我没看仔细，也是没想到pagination既有入参也有返回值