ahooks表格搜索条件、分页器参数做缓存优化

1、所需引入

import { useAntdTable } from 'ahooks';

2、搜索组件：

<Table

            className="mt-2"

            bordered

            rowSelection={rowSelection}

            columns={columns}

            scroll={{ y: Number(sessionStorage?.getItem('bodyHeight')) - 270 }}

            getPopupContainer={(triggerNode: { parentElement: any }) => triggerNode.parentElement || document.body}

            {...tableProps}

            pagination={{

              ...tableProps.pagination,

              showTotal: (e) => `共计${e}条记录`,

            }}

            rowKey="taskId"

          />

<SearchBarMore

            form={form}

            option={searchConfig}

            onSearch={submit}

            onClear={reset}

            placeholder="输入员工姓名、工号或项目名称"

          />

3、业务逻辑部分：

const getTableData = ({ current, pageSize, filters }: any, formData: any) => {

    if (filters) setFilteredValue(filters[2]);

    if (form?.getFieldsValue(true)?.tabIndex) setDefaultValue(form?.getFieldsValue(true)?.tabIndex);

    let paramsele = {

      isFull: form?.getFieldsValue(true)?.tabIndex === 'b' ? 2 : 1,

      acceptName: form?.getFieldsValue(true)?.acceptName || '',

      projectCodes: form?.getFieldsValue(true)?.projectCode?.toString() || '',

      submitName: form?.getFieldsValue(true)?.submitName || '',

      organizationCode: form?.getFieldsValue(true)?.organizationCode || '',

      cityName: form?.getFieldsValue(true)?.cityName || '',

      status: filters ? filters[2]?.toString() : '',

      current: current,

      pageSize: pageSize,

    };

    return TaskManageAPI.taskManageFlowQuery(cleanObject(paramsele)).then((res: any) => {

      if (res.code !== 200) {

        message.error(res.message);

        return {

          total: 0,

          list: [],

        };

      }

      setTotal(res.result?.total);

      return {

        total: res.result.total,

        list: res.result.records,

      };

    });

  };

  const { tableProps, search } = useAntdTable(getTableData, {

    form,

    cacheKey: 'fastDelivery-asset',

  });

  const { submit, reset } = search || {};