如何让ProTable中valueType为date的列以dateRange类型搜索？

直接通过列配置的search属性就能实现这个需求——让表格展示单个日期，搜索时用日期区间。具体做法是给目标列单独设置搜索框的valueType为dateRange，同时保留列本身的valueType为date。

代码示例 #

import ProTable from '@ant-design/pro-table';
import moment from 'moment';

const columns = [
  {
    title: '创建时间',
    dataIndex: 'createTime',
    valueType: 'date', // 表格单元格展示单个日期格式
    search: {
      valueType: 'dateRange', // 搜索框使用日期区间类型
      // 可选：自定义区间参数的字段名，默认会生成「dataIndex_start」和「dataIndex_end」
      // fieldNames: { start: 'startTime', end: 'endTime' },
      // 可选：给日期选择器加额外配置
      pickerProps: {
        format: 'YYYY-MM-DD',
        disabledDate: (current) => current && current < moment().startOf('day'),
      },
    },
  },
  // 其他列配置...
];

export default function BusinessTable() {
  return (
    <ProTable
      columns={columns}
      request={async (params) => {
        // 这里的params会包含区间参数，比如默认的createTime_start、createTime_end
        // 或者你自定义的startTime、endTime
        const response = await yourBackendApi(params);
        return {
          data: response.list,
          total: response.totalCount,
        };
      }}
    />
  );
}

关键注意点 #

• 后端需要对应接收区间参数，比如默认的xxx_start和xxx_end，或者你通过fieldNames自定义的字段名
• 如果需要对搜索框的行为做更多控制，比如默认选中的区间、占位符等，可以在search属性里添加对应的配置项，比如placeholder: ['开始日期', '结束日期']
• 确保项目中已经安装并引入了moment或者dayjs（ProTable的日期组件依赖这些库）

内容的提问来源于stack exchange，提问作者Anna Lee