使用 antd/procomponents/pro-table 中的困惑

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› React

这是一个创建于 664 天前的主题，其中的信息可能已经有所发展或是发生改变。

4 条回复 • 2023-03-09 09:44:52 +08:00

oppddd

2023-03-02 19:24:26 +08:00

react-query 的请求方式

```tsx
const { data, isLoading, refetch } = useQuery(['org-user-table', orgId, query], {
queryFn: () => {
return queryUserListUsingPOST({
size: query.pageSize || 20,
current: query.current || 1,
byCondition: {
name: query.name,
orgId: Number(orgId) || 0,
state: query.state || '',
},
})
},
})
```

```tsx
<ProTable
// 请注意修改主键 id
rowKey={'roleId'}
columns={columns}
pagination={{ pageSize: 10, showQuickJumper: true }}
request={
// 这里发起请求
() => {
return Promise()
}
}>
</ProTable>
```

这两个怎么配合啊，因为 ant 官方推荐使用 request 请求（会自己管理请求参数，分页等）；

Sendya

2023-03-02 23:51:05 +08:00

类似这样

```tsx
<ProTable
rowKey={'roleId'}
columns={columns}
request={async (params, sorter) => {
const { data, total = 0 } = await queryUserListUsingPOST(params);
return {
data,
totla,
success: true,
}
}}
/>

```

oppddd

2023-03-03 09:54:08 +08:00

嗯，我其实想让 table 变成木偶组件；这样我就可以使用 react-query 了

LOWINC

2023-03-09 09:44:52 +08:00

https://ahooks.js.org/zh-CN/hooks/use-antd-table