Ant Design Pro 从 URL 参数中获取数据并设置到 ProTable 的 QueryFilter 中

useSearchParams

外部跳转到页面时，使用useSearchParams获取参数，注意依赖：是umi的useSearchParams。

获取到参数后使用formRef设置到ProTable中。

代码

import {useSearchParams} from "umi";

const formRef = useRef<ProFormInstance>(null!);

const [searchParams] = useSearchParams();

useEffect(() => {
  const from = searchParams.get('from');
  const to = searchParams.get('to');
  if (from && to) {
    formRef?.current?.setFieldValue("date", [dayjs(from), dayjs(to)] as [dayjs.Dayjs, dayjs.Dayjs]);
  }
  console.log("submit", from, to)
  formRef?.current?.submit();
  // setTimeout(() => {
  //   formRef?.current?.submit();
  // }, 300)
}, [searchParams]);

  <ProTable<TableListItem>
    formRef={formRef}
    manualRequest={true}
    request={async (params, sort, filters) => {
      console.log(params)
      const [[key, value] = []] = Object.entries(sort)
      const res = await request<Res>('/api/test', {
        method: 'GET',
        params: {
          page: params.current,
          pageSize: params.pageSize,
          sortField: key,
          sortMode: value === 'ascend' ? 'asc' : 'desc',
          ...params
        },
      });
      return {
        data: res.data.list,
        success: res.code === 0,
        total: res.data.count,
      }
    }}
     />