antd ProTable的分页问题?

发布于 2022-09-13 00:32:53 字数 1023 浏览 25 评论 0

1.我在使用antd pro的ProTable来解决表格问题?

其中,request属性的代码如下

 request={(params, sorter, filter) => getCategoryListByPage(params, sorter, filter)}

这里getCategoryListByPage 使用了自带的request工具类请求后端接口,后端接口的返回结构如下
image.png
其中results是具体的数据,
随后,我在post属性指定了方法

  postData={(_data)=>handleCategoryData(_data)}

handleCategoryData内容如下:

const handleCategoryData = (_data) => {

  const result = _data.results;
  const newData = [];
  for (let i = 0; i < result.length; i++) {
    const obj = {
      "id": result[i].id,
      "imgUrl": result[i].imgUrl,
      "categoryName": result[i].categoryName,
      "leaf": result[i].leaf,
      "seq": result[i].seq,
      "parentId": result[i].parentId,
    };
    newData.push(obj)
  }
  return newData;
}

至此,数据可以展示出来,但是分页不正常

我有两个问题
1.我该在哪里分页?
2.为啥handleCategoryData 的参数,antd怎么知道取我返回值里的data里的值,这个data名称是约定俗成的吗?

请教,多谢大家

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

谎言 2022-09-20 00:32:53

我先纠正问题,不需要postData这个函数来map数据,可以直接在request里做

        <ProTable
          columns={columns}
          actionRef={actionRef}
          rowKey='id'
          request={async (params) => {
            const resResult = await search_res(params)
const tableList = resResult.map(i => {...})
            return {
              data: tableList,
              total: tableList.length,
              success: true
            }
          }} />

第一个问题,点击分页会触发request,会把页面,页数,通过params传递给接口,const {current, pageSize} = params,接口拿到去请求返回数据

第二个问题,是request返回的data

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文