hooks icon indicating copy to clipboard operation
hooks copied to clipboard

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

Open freesaber opened this issue 5 months ago • 2 comments

封装了一个组件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导致,分页重新回到第一页。怎样让分页数量固定到当前页呢。

freesaber avatar Aug 28 '24 09:08 freesaber