如何为Ant Design Table创建可复用的列筛选组件实现全局复用？

当然可以封装通用的列筛选组件来减少重复代码，核心问题在于：AntD Table的columns数组接收的是配置对象集合，而非React元素，所以不能直接返回JSX组件，需要把筛选的JSX逻辑嵌入到列配置的对应属性中。下面是具体实现方案：

1. 封装通用筛选列生成函数 #

创建一个函数，接收列的基础配置和筛选规则，返回符合AntD要求的列配置对象，将筛选面板的JSX逻辑注入到filterDropdown属性中：

import { SearchOutlined } from '@ant-design/icons';
import { Input, Select, Button } from 'antd';

// 通用筛选列生成函数
const createFilterableColumn = (config) => {
  const { 
    title, 
    dataIndex, 
    filterType = 'text', 
    filterOptions, 
    onFilter,
    filteredValue,
    ...restConfig 
  } = config;

  // 文本搜索筛选面板
  const TextFilterPanel = ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
    <div style={{ padding: 8 }}>
      <Input
        placeholder={`搜索${title}`}
        value={selectedKeys[0]}
        onChange={(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
        onPressEnter={confirm}
        style={{ width: 188, marginBottom: 8, display: 'block' }}
      />
      <Button
        type="primary"
        onClick={confirm}
        size="small"
        style={{ width: 90, marginRight: 8 }}
      >
        确定
      </Button>
      <Button onClick={clearFilters} size="small" style={{ width: 90 }}>
        重置
      </Button>
    </div>
  );

  // 下拉选择筛选面板
  const SelectFilterPanel = ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
    <div style={{ padding: 8 }}>
      <Select
        placeholder={`选择${title}`}
        value={selectedKeys[0]}
        onChange={(value) => setSelectedKeys(value ? [value] : [])}
        style={{ width: 188, marginBottom: 8 }}
        allowClear
      >
        {filterOptions.map(opt => (
          <Select.Option key={opt.value} value={opt.value}>{opt.label}</Select.Option>
        ))}
      </Select>
      <Button
        type="primary"
        onClick={confirm}
        size="small"
        style={{ width: 90, marginRight: 8 }}
      >
        确定
      </Button>
      <Button onClick={clearFilters} size="small" style={{ width: 90 }}>
        重置
      </Button>
    </div>
  );

  // 返回最终列配置
  return {
    title,
    dataIndex,
    filterDropdown: filterType === 'text' ? TextFilterPanel : SelectFilterPanel,
    filterIcon: (filtered) => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
    onFilter: onFilter || ((value, record) => {
      if (filterType === 'text') {
        return record[dataIndex]?.toString().toLowerCase().includes(value.toLowerCase());
      }
      return record[dataIndex] === value;
    }),
    filteredValue,
    ...restConfig
  };
};

2. 在Table中使用封装的筛选列 #

直接调用生成函数，传入对应配置即可，和普通列配置兼容：

import { Table } from 'antd';

const columns = [
  // 文本搜索筛选列
  createFilterableColumn({
    title: '姓名',
    dataIndex: 'name',
    filterType: 'text',
    width: 120,
  }),
  // 下拉选择筛选列
  createFilterableColumn({
    title: '状态',
    dataIndex: 'status',
    filterType: 'select',
    filterOptions: [
      { value: 'active', label: '激活' },
      { value: 'disabled', label: '禁用' },
    ],
    width: 120,
  }),
  // 普通列不受影响
  {
    title: '操作',
    dataIndex: 'action',
    render: (_, record) => <Button type="link">编辑</Button>,
  },
];

// 渲染表格
<Table columns={columns} dataSource={yourDataSource} />

3. 关键注意点 #

• AntD的columns不接受JSX元素，必须返回配置对象，所以封装逻辑要以生成配置对象为核心，而非直接渲染组件。
• 如果需要受控筛选，只需在调用createFilterableColumn时传入filteredValue和自定义的onFilter逻辑，配合父组件state即可实现全局控制。
• 可扩展更多筛选类型（如日期范围、数字区间），只需新增对应的筛选面板组件，在生成函数中添加分支判断即可。

内容的提问来源于stack exchange，提问作者Abolfazl Jamshidi