在Ant Design ProTable中为远程筛选项设置默认值的最佳实践

背景介绍

Ant Design ProComponents 是 Ant Design 生态中的高级组件库，其中 ProTable 组件提供了强大的表格功能，包括筛选、分页、排序等特性。在实际开发中，我们经常需要从远程接口获取筛选项数据，并希望为这些筛选项设置默认值。

问题分析

ProTable 的 column 配置中可以通过 request 属性指定获取远程筛选项的接口，但文档中并未明确说明如何为这些远程获取的筛选项设置默认值。开发者通常会尝试使用 initialValue 属性来实现这一需求，但直接使用可能会遇到时序问题。

解决方案

方法一：使用 ProTable 的 form 属性

ProTable 内部集成了 ProForm 的功能，可以通过 form 属性来初始化表单值。这种方法的关键在于处理好请求的时序问题：

<ProTable
  search={false}
  options={false}
  pagination={false}
  rowKey="id"
  form={{
    request: async () => {
      return {
        // 这里设置默认值
        fieldName: 'defaultValue'
      };
    },
  }}
  // 其他配置...
/>

方法二：结合 useEffect 和 formRef

更可靠的方式是使用 formRef 结合 useEffect 来设置默认值：

import { useRef, useEffect } from 'react';
import { ProTable } from '@ant-design/pro-components';

function MyTable() {
  const formRef = useRef();
  
  useEffect(() => {
    // 在数据加载完成后设置默认值
    formRef.current?.setFieldsValue({
      fieldName: 'defaultValue'
    });
  }, [/* 依赖项 */]);

  return (
    <ProTable
      formRef={formRef}
      // 其他配置...
    />
  );
}

注意事项

1. 时序问题：确保在远程筛选项数据加载完成后再设置默认值，否则可能不生效
2. 性能考虑：避免在每次渲染时都重置默认值
3. 数据类型匹配：确保默认值的类型与筛选项的值类型一致

最佳实践推荐

对于复杂的场景，建议采用以下模式：

1. 先获取筛选项数据
2. 根据业务逻辑确定默认值
3. 使用 formRef 动态设置默认值
4. 在默认值设置完成后触发表格数据加载

这种模式可以确保所有数据都按正确的顺序加载和初始化，避免因异步操作导致的时序问题。

总结

在 Ant Design ProTable 中为远程筛选项设置默认值需要特别注意组件生命周期和异步操作的时序问题。通过合理使用 form 属性或 formRef，开发者可以灵活地控制筛选表单的初始状态，从而提供更好的用户体验。