论Ant Design ProTable 中如何优雅设置搜索框默认值

最近做的几个项目都需要在项目中回显数据,刚好我用的就是Ant Design 的ProTable,官方并没有很明确例子和说明如何去做,有以下几个关键点是要注意的。以下是优化后的解决方案及代码说明:

一、问题原因分析

  1. formRef 初始化问题:未正确初始化 useRef 导致引用为空
  2. 时间格式问题:直接使用字符串而非 moment 对象
  3. 执行时机问题:表单未完全初始化时设置值

优化后的解决方案

jsx 复制代码
import React, { 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) => ({
        start_time: value?.[0],
        end_time: value?.[1],
      }),
    },
  },
];

export default () => {
  const formRef = useRef(null); // 正确初始化 ref
  
  // 使用 moment 对象作为默认值
  const defaultTimeRange = [
    moment().startOf('month'),
    moment().endOf('month')
  ];

  useEffect(() => {
    // 添加空依赖确保只执行一次
    if (formRef.current) {
      // 先设置表单值
      formRef.current.setFieldsValue({
        created_at: defaultTimeRange,
      });
      
      // 延迟提交确保表单渲染完成
      setTimeout(() => {
        formRef.current.submit();
      }, 0);
    }
  }, []); // 空依赖数组确保只运行一次

  return (
    <ProTable
      columns={columns}
      request={getList}
      rowKey="id"
      formRef={formRef}
      search={{
        optionRender: (searchConfig, formProps, dom) => [
          <div key="submit">自定义搜索按钮</div>,
        ],
      }}
    />
  );
};

二、关键改进说明

  1. 正确初始化 ref

    jsx 复制代码
    const formRef = useRef(null);
  2. 使用 moment 对象

    jsx 复制代码
    moment().startOf('month') // 返回 moment 对象
  3. 合理的执行时机控制 • 使用 setTimeout 确保表单渲染完成

    • 空依赖的 useEffect 确保初始化逻辑只执行一次

  4. 推荐使用异步初始化

    jsx 复制代码
    useEffect(() => {
      const timer = setTimeout(() => {
        if (formRef.current) {
          formRef.current.setFieldsValue({
            created_at: defaultTimeRange,
          });
        }
      }, 100);
      
      return () => clearTimeout(timer);
    }, []);

三、其他注意事项

  1. 如果遇到表单值不更新,尝试使用 formRef.current.resetFields() 重置表单
  2. 确保服务端接口能正确处理时间范围参数
  3. 对于复杂场景,建议使用 initialValues 配合请求参数
相关推荐
江城开朗的豌豆2 分钟前
前端性能救星!用 requestAnimationFrame 丝滑渲染海量数据
前端·javascript·面试
江城开朗的豌豆3 分钟前
src和href:这对'双胞胎'属性,你用对了吗?
前端·javascript·面试
江城开朗的豌豆9 分钟前
forEach遇上await:你的异步代码真的在按顺序执行吗?
前端·javascript·面试
万少18 分钟前
HarmonyOS Next 弹窗系列教程(3)
前端·harmonyos·客户端
七灵微1 小时前
【后端】单点登录
服务器·前端
持久的棒棒君5 小时前
npm安装electron下载太慢,导致报错
前端·electron·npm
crary,记忆7 小时前
Angular微前端架构:Module Federation + ngx-build-plus (Webpack)
前端·webpack·angular·angular.js
漂流瓶jz8 小时前
让数据"流动"起来!Node.js实现流式渲染/流式传输与背后的HTTP原理
前端·javascript·node.js
SamHou08 小时前
手把手 CSS 盒子模型——从零开始的奶奶级 Web 开发教程2
前端·css·web
我不吃饼干8 小时前
从 Vue3 源码中了解你所不知道的 never
前端·typescript