如何在AntD表格列中实现带日期选择器的范围筛选功能？

当然可以实现这种日期范围筛选器，AntD Table提供了灵活的自定义筛选能力，完全满足你的需求。下面是具体实现方案：

核心思路 #

利用AntD Table列配置中的filterDropdown（自定义筛选面板）、onFilter（过滤逻辑）和filteredValue（筛选状态绑定）属性，结合AntD的DatePicker.RangePicker作为筛选组件，实现日期范围过滤。

完整代码示例 #

import { Table, DatePicker, Space } from 'antd';
import { useState } from 'react';
import { FilterOutlined } from '@ant-design/icons';

const { RangePicker } = DatePicker;

// 模拟数据源
const dataSource = [
  { key: '1', name: '张三', createTime: '2024-05-10' },
  { key: '2', name: '李四', createTime: '2024-06-15' },
  { key: '3', name: '王五', createTime: '2024-07-20' },
];

const App = () => {
  // 管理日期范围筛选状态
  const [dateRange, setDateRange] = useState([]);

  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      // 自定义筛选图标
      filterIcon: () => <FilterOutlined />,
      // 自定义筛选面板
      filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
        <div style={{ padding: 16 }}>
          <RangePicker
            value={selectedKeys[0] || []}
            onChange={(dates) => setSelectedKeys(dates ? [dates] : [])}
            style={{ marginBottom: 8, width: '100%' }}
          />
          <Space>
            <button
              type="primary"
              onClick={() => {
                confirm();
                setDateRange(selectedKeys[0] || []);
              }}
              style={{ width: 80 }}
            >
              确定
            </button>
            <button 
              onClick={() => {
                clearFilters();
                setDateRange([]);
              }} 
              style={{ width: 80 }}
            >
              重置
            </button>
          </Space>
        </div>
      ),
      // 定义过滤逻辑：判断行数据日期是否在选中范围内
      onFilter: (value, record) => {
        if (!value || value.length === 0) return true;
        const [startDate, endDate] = value;
        const recordTimestamp = new Date(record.createTime).getTime();
        return recordTimestamp >= startDate.getTime() && recordTimestamp <= endDate.getTime();
      },
      // 绑定筛选状态，控制筛选高亮
      filteredValue: dateRange.length > 0 ? [dateRange] : null,
    },
  ];

  return <Table dataSource={dataSource} columns={columns} />;
};

export default App;

关键说明 #

• 状态管理：用useState维护当前选中的日期范围，确保筛选状态在组件内同步
• 筛选面板交互：在filterDropdown中处理日期选择、确认和重置逻辑，调用AntD提供的confirm和clearFilters方法更新表格筛选状态
• 过滤逻辑：将日期转换为时间戳进行比较，避免不同日期格式带来的判断误差
• 后端分页场景：如果是后端分页，只需将选中的dateRange转换为接口需要的格式（如字符串），传给后端做数据过滤即可

内容的提问来源于stack exchange，提问作者Priyavart Rajain