antd ProTable的分页问题?

dongcx1234567
  • 224

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名称是约定俗成的吗?

请教,多谢大家

回复
阅读 163
1 个回答
健少爷的小屋
  • -2
新手上路,请多包涵

我先纠正问题,不需要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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏