hooks
hooks copied to clipboard
useAntdTable在submit的时候,固定分页条件
封装了一个组件proTable
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();
}
}
});
}
...
<Table<T>
{...tableProps}
scroll={{ x: true, ...scroll }}
pagination={false}
rowKey={rowKey}
size="middle"
columns={columns}
rowSelection={
rowSelection
? {
type: selectionType,
selectedRowKeys: selectedKeys,
onChange: handleRowSelectionChange,
}
: undefined
}
/>
...
<Pagination
showQuickJumper
showTotal={(total) => `总共 ${total} 条`}
pageSizeOptions={Array.from({ length: 10 }, (_, i) => (i + 1) * 10).map(String)}
{...tableProps.pagination}
onChange={(page, pageSize) => tableProps.onChange({current: page, pageSize})}
/>
...
使用proTable
const columns: TableColumnsType<Auth.Person> = [
{
title: '操作',
dataIndex: 'action',
key: 'action',
fixed: 'right',
width: 250,
render: (_, record) => (
<Space.Compact block>
</AuthButton>
{
record.status === 0 ?
<Popconfirm
title="确定启用该员工吗?"
onConfirm={() => handleEnable(record)}
>
<AuthButton size="small" type="link" auth={authConstants.PERSON_ENABLE}>启用</AuthButton>
</Popconfirm>
:<Popconfirm
title="确定禁用该员工吗?"
onConfirm={() => handleEnable(record)}
>
<AuthButton size="small" type="link" auth={authConstants.PERSON_ENABLE}>禁用</AuthButton>
</Popconfirm>
}
}
]
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<Auth.Person>
tableRef={proTableRef}
rowKey="employeeId"
columns={columns}
request={getTableData}
>
我的问题是,proTableRef?.current?.submit();最后是执行的useAntdTable的submit。这个submit导致,分页重新回到第一页。怎样让分页数量固定到当前页呢。