useAntdTable在submit的时候,固定分页条件
- Dominant language
- TypeScript
- Stars
- 15k
- Forks
- 2.8k
- Avg merge
- 15h 7m
- Merged PRs (30d)
- 2
Description
封装了一个组件proTable
``` ts
import { useAntdTable } from 'ahooks';
...
const [form] = Form.useForm();
const { tableProps, search: { submit, reset } } = useAntdTable(request, {
defaultPageSize,
form
});
if(tableRef){
useImperativeHandle(tableRef, () => {
return {
submit: () => {
submit();
},
reset: () => {
reset();
}
}
});
}
...
{...tableProps}
scroll={{ x: true, ...scroll }}
pagination={false}
rowKey={rowKey}
size="middle"
columns={columns}
rowSelection={
rowSelection
? {
type: selectionType,
selectedRowKeys: selectedKeys,
onChange: handleRowSelectionChange,
}
: undefined
}
/>
...
`总共 ${total} 条`}
pageSizeOptions={Array.from({ length: 10 }, (_, i) => (i + 1) * 10).map(String)}
{...tableProps.pagination}
onChange={(page, pageSize) => tableProps.onChange({current: page, pageSize})}
/>
...
```
使用proTable
``` ts
const columns: TableColumnsType = [
{
title: '操作',
dataIndex: 'action',
key: 'action',
fixed: 'right',
width: 250,
render: (_, record) => (
{
record.status === 0 ?
handleEnable(record)}
>
启用
: handleEnable(record)}
>
禁用
}
}
]
const getTableData = async ( params: TableParams, formData: FormData): Promise<{ total: number; list: Auth.Person[] }> => {
const { current, pageSize, filters, sorter, extra } = params;
const result = await getStorePersonEmployeeList(queryParams);
return {
total: result ? Number(result.totalCount) : 0,
list: result ? result.list : [],
};
}
...
// 启用、禁用
const handleEnable = async (record: Auth.Person) => {
const status = record.status === 0 ? 1 : 0;
const params = {
id: record.employeeId,
status
};
try {
await updatePersonEmployeeStatus(params)
if(status === 0 ){
message.error(`禁用成功`);
}else {
message.success(`启用成功`);
}
proTableRef?.current?.submit();
} catch {
}
}
...
ProTable
tableRef={proTableRef}
rowKey="employeeId"
columns={columns}
request={getTableData}
>
```
我的问题是,proTableRef?.current?.submit();最后是执行的useAntdTable的submit。这个submit导致,分页重新回到第一页。怎样让分页数量固定到当前页呢。
Contributor guide
Research direction
Start by tracing the useAntdTable submit entry point and its pagination state, then compare it with the ProTable wrapper's tableProps.pagination and onChange handling shown in the issue. Reproduce the status update followed by submit and verify that the request retains the current page while still refreshing the data.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100