Ant Design ProTable 搜索框设置默认值

最近遇到一个需求，需要在ProTable搜索框的时间周期设置默认开始时间和结束时间，并调用接口返回数据显示。

实现思路：

1. 创建formRef来设置ProTable里面搜索的默认值；
2. 通过moment来获取当前月的第一天和最后一天；
3. 通过formRef.current?.setFieldsValue赋值给created_at；
4. 通过formRef.current.submit()调用接口，渲染页面；

实现该需求的必要代码：

import React, { useState, useEffect, useRef } from 'react';
import ProTable from '@ant-design/pro-table';
import { getList } from './service';
import moment from 'moment';
const columns = [
    {
        title: '时间周期',
        dataIndex: 'created_at',
        valueType: 'dateTimeRange',
        hideInTable: true,
        search: {
            transform: (value) => {
                return {
                    start_time: value[0],
                    end_time: value[1],
                };
            },
        },
    },
]
const formRef = useRef();
const curMonth = [
    moment().startOf('month').format('YYYY-MM-DD HH:mm:ss'),
    moment().endOf('month').format('YYYY-MM-DD HH:mm:ss'),
];
useEffect(() => {
    formRef.current?.setFieldsValue({
        created_at: curMonth,
    });
    formRef.current?.submit();
});

return (
    <>
        <ProTable
            columns={columns}
            request={getList}
            rowKey="id"
            formRef={formRef}
        />
    </>
)

使用时遇到问题可以给我留言