alibaba / alibaba/hooks

useAntdTable在submit的时候,固定分页条件

Open
#2,635 2 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.