QueryFilter / LightFilter 筛选表单

有些时候表单要与别的组件组合使用，常见的有 Table ，List 等，这时候就需要一些特殊形态的表单。QueryFilter 和 LightFilter 解决了配合组件使用的问题，避免了复杂的样式设置。ProTable 中默认支持了 QueryFilter 和 LightFilter 作为自己的筛选表单。

查询筛选

基本使用

import {
  ProFormDateTimePicker,
  ProFormText,
  QueryFilter,
} from '@ant-design/pro-components';

const Demo = () => {
  return (
    <QueryFilter>
      <ProFormDateTimePicker
        label="下单时间"
        colProps={{ xl: 12 }}
        name="orderTime"
        required
      />
      <ProFormText disabled colProps={{ xl: 12 }} name="pay" label="支付方式" />
    </QueryFilter>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

{
  "defaultColsNumber": 6
}

基本使用

import {
  ProForm,
  ProFormDatePicker,
  ProFormText,
  QueryFilter,
} from '@ant-design/pro-components';
import { Input } from 'antd';

const Demo = () => {
  const formProps = {
    defaultColsNumber: 6,
  };
  return (
    <>
      <>
        <QueryFilter {...formProps}>
          <ProFormDatePicker
            // key={i}
            colSize={4}
            name="test"
            label="test"
          />
          {[...Array(10).keys()].map((i) => (
            <ProFormDatePicker
              key={i}
              name={`startdate${i + 1}`}
              label={`Date${i + 1}`}
            />
          ))}
        </QueryFilter>
        <pre>{JSON.stringify(formProps, null, 2)}</pre>
      </>
      <QueryFilter<{
        name: string;
        company: string;
      }>
        onFinish={async () => {

        }}
        span={6}
        defaultCollapsed={false}
      >
        <ProForm.Item name="name" label="test">
          <Input />
        </ProForm.Item>
        <ProFormText
          name="name"
          label="应用名称"
          rules={[{ required: true }]}
        />
        <ProFormText name="sex" label="性别" />
      </QueryFilter>
      <QueryFilter<{
        name: string;
        company: string;
      }>
        onFinish={async () => {

        }}
        span={6}
        defaultCollapsed={false}
      >
        <ProFormText
          name="name"
          label="应用名称"
          rules={[{ required: true }]}
        />
        <ProFormText name="creater" label="创建人" />
        <ProFormText name="sex" label="性别" />
      </QueryFilter>
      <QueryFilter<{
        name: string;
        company: string;
      }>
        onFinish={async () => {

        }}
        defaultCollapsed={false}
      >
        <ProFormText
          name="name"
          label="应用名称"
          rules={[{ required: true }]}
        />
        <ProFormText name="creater" label="创建人" />
        <ProFormText name="sex" label="性别" />
        <ProFormText name="status" label="应用状态" />
        <ProFormText name="startdate" label="响应日期" />
        <ProFormText name="create" label="创建时间" />
      </QueryFilter>
      <QueryFilter<{
        name: string;
        company: string;
      }>
        onFinish={async () => {

        }}
        span={12}
        defaultCollapsed={false}
      >
        <ProFormText
          name="name"
          label="应用名称"
          rules={[{ required: true }]}
        />
        <ProFormText name="creater" label="创建人" />
        <ProFormText name="sex" label="性别" />
        <ProFormText name="status" label="应用状态" />
        <ProFormText name="startdate" label="响应日期" />
        <ProFormText name="create" label="创建时间" colSize={3} />
      </QueryFilter>
      <QueryFilter<{
        name: string;
        company: string;
      }>
        onFinish={async () => {

        }}
        span={8}
        defaultCollapsed={false}
      >
        <ProFormText
          name="name"
          label="应用名称"
          rules={[{ required: true }]}
        />
        <ProFormText name="creater" label="创建人" />
        <ProFormText name="sex" label="性别" />
        <ProFormText name="status" label="应用状态" />
        <ProFormText name="startdate" label="响应日期" />
        <ProFormText name="create" label="创建时间" colSize={3} />
      </QueryFilter>
      <QueryFilter<{
        name: string;
        company: string;
      }>
        onFinish={async () => {

        }}
        span={4}
        submitterColSpanProps={{ span: 12 }}
        defaultColsNumber={1}
        defaultCollapsed={false}
      >
        <ProFormText
          name="name"
          label="应用名称"
          rules={[{ required: true }]}
        />
        <ProFormText name="creater" label="创建人" />
        <ProFormText name="sex" label="性别" />
        <ProFormText name="status" label="应用状态" />
        <ProFormText name="startdate" label="响应日期" />
        <ProFormText name="create" label="创建时间" colSize={3} />
      </QueryFilter>
    </>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

查询筛选-默认收起

import {
  ProFormDatePicker,
  ProFormText,
  QueryFilter,
} from '@ant-design/pro-components';

const Demo = () => {
  return (
    <QueryFilter defaultCollapsed split>
      <ProFormText name="name" label="应用名称" />
      <ProFormDatePicker name="createDate" label="创建时间" />
      <ProFormText name="status" label="应用状态" />
      <ProFormDatePicker name="replyDate" label="响应日期" />
      <ProFormDatePicker name="startDate" label="创建时间" />
      <ProFormDatePicker name="endDate" label="结束时间" />
    </QueryFilter>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

查询筛选-垂直布局

import {
  ProFormCheckbox,
  ProFormDatePicker,
  ProFormRadio,
  ProFormText,
  QueryFilter,
} from '@ant-design/pro-components';

const Demo = () => {
  return (
    <QueryFilter layout="vertical">
      <ProFormText name="name" label="这是一个超级超级长的名称" />
      <ProFormDatePicker name="birth" label="创建时间" />
      <ProFormText name="sex" label="应用状态" />
      <ProFormRadio.Group
        name="freq"
        label="查询频度"
        options={[
          {
            value: 'weekly',
            label: '每周',
          },
          {
            value: 'quarterly',
            label: '每季度',
          },
          {
            value: 'monthly',
            label: '每月',
          },
          {
            value: 'yearly',
            label: '每年',
          },
        ]}
      />
      <ProFormCheckbox.Group
        name="checkbox"
        label="行业分布"
        options={['农业', '制造业', '互联网']}
      />
    </QueryFilter>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

小程序开发入驻 ISV 权限

文章

项目

应用

高级筛选

查询筛选-搜索

import { DownOutlined, UpOutlined } from '@ant-design/icons';
import {
  ProForm,
  ProFormDatePicker,
  ProFormText,
  QueryFilter,
} from '@ant-design/pro-components';
import { Input, Tabs } from 'antd';
import React, { useState } from 'react';

type AdvancedSearchProps = {
  onFilterChange?: (allValues: any) => void;
  onSearch?: (text: string) => void;
  onTypeChange?: (type: string) => void;
  defaultType?: string;
};

const AdvancedSearch: React.FC<AdvancedSearchProps> = (props) => {
  const {
    onSearch,
    onTypeChange,
    defaultType = 'articles',
    onFilterChange,
  } = props;
  const [searchText, setSearchText] = useState<string>();
  const [showFilter, setShowFilter] = useState<boolean>(true);
  const quickSearch = ['小程序开发', '入驻', 'ISV 权限'];
  return (
    <div
      style={{
        padding: 24,
      }}
    >
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          gap: 8,
        }}
      >
        <Input.Search
          placeholder="请输入"
          enterButton="搜索"
          value={searchText}
          onChange={(e) => {
            setSearchText(e.target.value);
          }}
          onSearch={onSearch}
          style={{ maxWidth: 522, width: '100%' }}
        />
        <div
          style={{
            display: 'flex',
            gap: 12,
          }}
        >
          {quickSearch.map((text) => (
            <a
              key={text}
              onClick={() => {
                setSearchText(text);
                if (onSearch) {
                  onSearch(text);
                }
              }}
            >
              {text}
            </a>
          ))}
        </div>
      </div>

      <Tabs
        defaultActiveKey={defaultType}
        onChange={onTypeChange}
        tabBarExtraContent={
          <a
            style={{
              display: 'flex',
              gap: 4,
            }}
            onClick={() => {
              setShowFilter(!showFilter);
            }}
          >
            高级筛选 {showFilter ? <UpOutlined /> : <DownOutlined />}
          </a>
        }
        items={[
          {
            key: 'articles',
            label: '文章',
          },
          {
            key: 'projects',
            label: '项目',
          },
          {
            key: 'applications',
            label: '应用',
          },
        ]}
      />

      {showFilter ? (
        <QueryFilter
          submitter={false}
          span={24}
          labelWidth="auto"
          split
          onChange={onFilterChange}
        >
          <ProForm.Group title="姓名">
            <ProFormText name="name" />
          </ProForm.Group>
          <ProForm.Group title="详情">
            <ProFormText name="age" label="年龄" />
            <ProFormDatePicker name="birth" label="生日" />
          </ProForm.Group>
        </QueryFilter>
      ) : null}
    </div>
  );
};

export default AdvancedSearch;

查询筛选-自定义渲染的控件数量

import {
  ProFormDatePicker,
  ProFormText,
  QueryFilter,
} from '@ant-design/pro-components';

const Demo = () => {
  return (
    <QueryFilter defaultCollapsed split defaultFormItemsNumber={5}>
      <ProFormText name="name" label="应用名称" />
      <ProFormDatePicker name="createDate" label="创建时间" />
      <ProFormText name="status" label="应用状态" />
      <ProFormDatePicker name="replyDate" label="响应日期" />
      <ProFormDatePicker name="startDate" label="创建时间" />
      <ProFormDatePicker name="endDate" label="结束时间" />
    </QueryFilter>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

查询筛选-折叠下一行控件数量

import {
  ProFormDatePicker,
  ProFormText,
  QueryFilter,
} from '@ant-design/pro-components';

const Demo = () => {
  return (
    <QueryFilter defaultCollapsed split defaultColsNumber={6}>
      <ProFormText name="name" label="应用名称" />
      <ProFormDatePicker name="createDate" label="创建时间" />
      <ProFormText name="status" label="应用状态" />
      <ProFormDatePicker name="replyDate" label="响应日期" />
      <ProFormDatePicker name="startDate" label="创建时间" />
      <ProFormDatePicker name="endDate" label="结束时间" />
    </QueryFilter>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

轻量筛选

基本使用

import { LightFilter } from '@ant-design/pro-components';
import { Radio, Space, TreeSelect } from 'antd';
import dayjs from 'dayjs';
import React from 'react';
import type { SizeType } from '../../../src/utils/antdTypes';

/** 树形选择数据 */
const treeData = [
  {
    title: '技术研发部',
    value: '0-0',
    key: '0-0',
    children: [
      {
        title: '前端开发组',
        value: '0-0-0',
        key: '0-0-0',
      },
    ],
  },
  {
    title: '产品设计部',
    value: '0-1',
    key: '0-1',
    children: [
      {
        title: '产品策划组',
        value: '0-1-0',
        key: '0-1-0',
      },
      {
        title: 'UX 设计组',
        value: '0-1-1',
        key: '0-1-1',
      },
      {
        title: '用户研究组',
        value: '0-1-2',
        key: '0-1-2',
      },
    ],
  },
];

/** 级联区域数据 */
const regionOptions = [
  {
    value: 'zhejiang',
    label: '浙江',
    children: [
      {
        value: 'hangzhou',
        label: '杭州',
        children: [
          { value: 'xihu', label: '西湖' },
          { value: 'binjiang', label: '滨江' },
        ],
      },
      {
        value: 'ningbo',
        label: '宁波',
        children: [
          { value: 'jiangbei', label: '江北' },
          { value: 'haishu', label: '海曙' },
        ],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: '江苏',
    children: [
      {
        value: 'nanjing',
        label: '南京',
        children: [
          { value: 'zhonghuamen', label: '中华门' },
          { value: 'xuanwu', label: '玄武' },
        ],
      },
      {
        value: 'suzhou',
        label: '苏州',
        children: [
          { value: 'gusu', label: '姑苏' },
          { value: 'wuzhong', label: '吴中' },
        ],
      },
    ],
  },
];

type LightFilterVariant = 'outlined' | 'filled' | 'borderless';

interface FilterFormValues {
  sex?: { value: string; label: string }[];
  area?: string[];
  region?: string[];
  treeSelect?: string[];
  open?: boolean;
  status?: boolean;
  count?: number;
  range?: [number, number];
  slider?: number;
  name?: string;
  address?: string;
  keyword?: string;
  date?: string;
  dateRange?: [string, string];
  datetime?: string;
  datetimeRange?: [number, number];
  time?: string;
  timeRange?: [number, number];
  nameSet?: [string, string];
}

const defaultDate = dayjs('2024-01-15');
const defaultDateTime = dayjs('2024-01-15 14:30:00');

const Demo = () => {
  const [size, setSize] = React.useState<SizeType>('middle');
  const [variant, setVariant] =
    React.useState<LightFilterVariant>('borderless');

  const initialValues: Partial<FilterFormValues> = {
    keyword: '关键词示例',
    sex: [
      { value: 'man', label: '男' },
      { value: 'woman', label: '女' },
    ],
    area: ['beijing', 'shanghai'],
    region: ['zhejiang', 'hangzhou', 'xihu'],
    treeSelect: ['0-0', '0-1'],
    open: true,
    status: false,
    count: 100,
    range: [20, 80],
    slider: 50,
    address: '北京市朝阳区',
    date: defaultDate.format('YYYY-MM-DD'),
    dateRange: [
      defaultDate.format('YYYY-MM-DD'),
      defaultDate.add(7, 'd').format('YYYY-MM-DD'),
    ],
    datetime: defaultDateTime.format('YYYY-MM-DD HH:mm:ss'),
    datetimeRange: [
      defaultDateTime.add(-1, 'd').valueOf(),
      defaultDateTime.valueOf(),
    ],
    time: defaultDateTime.format('HH:mm:ss'),
    timeRange: [
      defaultDateTime.add(-1, 'h').valueOf(),
      defaultDateTime.valueOf(),
    ],
    nameSet: ['张', '三'],
  };

  return (
    <div>
      <Space wrap size="middle" style={{ marginBottom: 16 }}>
        <Space>
          <span>尺寸：</span>
          <Radio.Group
            value={size}
            onChange={(e) => setSize(e.target.value)}
            optionType="button"
            buttonStyle="solid"
          >
            <Radio.Button value="middle">Middle</Radio.Button>
            <Radio.Button value="small">Small</Radio.Button>
          </Radio.Group>
        </Space>
        <Space>
          <span>边框样式：</span>
          <Radio.Group
            value={variant}
            onChange={(e) => setVariant(e.target.value)}
            optionType="button"
            buttonStyle="solid"
          >
            <Radio.Button value="borderless">无边框 (borderless)</Radio.Button>
            <Radio.Button value="outlined">线框 (outlined)</Radio.Button>
            <Radio.Button value="filled">填充 (filled)</Radio.Button>
            <Radio.Button value="underlined">下划线 (underlined)</Radio.Button>
          </Radio.Group>
        </Space>
      </Space>

      <LightFilter<FilterFormValues>
        initialValues={initialValues}
        size={size}
        variant={variant}
        onFinish={async (values) => {
          console.log('筛选提交:', values);
        }}
      >
        <LightFilter.select
          name="sex"
          label="性别"
          showSearch
          allowClear={false}
          fieldProps={{ labelInValue: true }}
          valueEnum={{
            man: '男',
            woman: '女',
          }}
        />
        <LightFilter.select
          name="area"
          label="地区"
          mode="multiple"
          valueEnum={{
            beijing: '北京',
            shanghai: '上海',
            hangzhou: '杭州',
            guangzhou: '广州',
            shenzhen: '深圳',
            long: '这是一个很长的用来测试溢出的项目',
          }}
        />
        <LightFilter.checkboxGroup
          name="checkboxGroup"
          label="标签"
          options={['A', 'B', 'C', 'D', 'E', 'F']}
        />
        <LightFilter.treeSelect
          label="树形选择"
          name="treeSelect"
          fieldProps={{
            fieldNames: { label: 'title' },
            treeData,
            treeCheckable: true,
            showCheckedStrategy: TreeSelect.SHOW_PARENT,
            placeholder: '请选择',
          }}
        />
        <LightFilter.cascader
          name="region"
          label="区域"
          width="md"
          fieldProps={{
            options: regionOptions,
            placeholder: '请选择省/市/区',
          }}
        />
        <LightFilter.switch name="open" label="开关" />
        <LightFilter.switch name="status" label="状态" secondary />
        <LightFilter.digit name="count" label="数量" min={0} max={9999} />
        <LightFilter.slider name="range" label="范围" range />
        <LightFilter.slider name="slider" label="滑块" />
        <LightFilter.input
          name="keyword"
          label="关键词"
          placeholder="请输入关键词"
        />
        <LightFilter.input
          name="address"
          label="地址"
          secondary
          placeholder="请输入地址"
        />
        <LightFilter.date name="date" label="日期" allowClear={false} />
        <LightFilter.dateRange name="dateRange" label="日期范围" />
        <LightFilter.dateTime name="datetime" label="日期时间" />
        <LightFilter.dateTimeRange name="datetimeRange" label="日期时间范围" />
        <LightFilter.time name="time" label="时间" />
        <LightFilter.timePickerRange name="timeRange" label="时间范围" />
        <LightFilter.fieldSet name="nameSet" label="姓名">
          <LightFilter.input placeholder="姓" />
          <LightFilter.input placeholder="名" />
        </LightFilter.fieldSet>
      </LightFilter>
    </div>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

MiddleSmall

轻量筛选-自定义footer

import { LightFilter, ProFormText } from '@ant-design/pro-components';
import { Button, Radio, Space } from 'antd';
import React from 'react';
import type { SizeType } from '../../../src/utils/antdTypes';

const Demo = () => {
  const [size, setSize] = React.useState<SizeType>('middle');
  return (
    <div>
      <Radio.Group
        value={size}
        onChange={(e) => {
          setSize(e.target.value);
        }}
      >
        <Radio.Button value="middle">Middle</Radio.Button>
        <Radio.Button value="small">Small</Radio.Button>
      </Radio.Group>

      <br />
      <br />

      <Space orientation="vertical">
        <LightFilter
          size={size}
          initialValues={{
            name: 'Jack2',
          }}
        >
          <ProFormText
            name="name"
            label="名称"
            footerRender={(_, onClear) => (
              <Button
                onClick={() => {
                  onClear?.();
                }}
              >
                自定义footer
              </Button>
            )}
          />
        </LightFilter>

        <LightFilter
          size={size}
          initialValues={{
            name: 'Jack2',
          }}
        >
          <ProFormText name="name" label="名称" footerRender={false} />
        </LightFilter>

        <LightFilter
          size={size}
          initialValues={{
            name: 'Jack2',
          }}
          collapse
          collapseLabel="footer为false"
          footerRender={false}
        >
          <ProFormText name="name" label="名称" />
        </LightFilter>

        <LightFilter
          size={size}
          initialValues={{
            name: 'Jack2',
          }}
          collapse
          collapseLabel="自定义footer"
          footerRender={(_, onClear) => (
            <Button
              onClick={() => {
                onClear?.();
              }}
            >
              自定义footer
            </Button>
          )}
        >
          <ProFormText name="name" label="名称" />
        </LightFilter>
      </Space>
    </div>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

轻量筛选-边框模式

import { FilterOutlined } from '@ant-design/icons';
import {
  LightFilter,
  ProFormCascader,
  ProFormCheckbox,
  ProFormDatePicker,
  ProFormRadio,
  ProFormSelect,
  ProFormTreeSelect,
} from '@ant-design/pro-components';
import { TreeSelect, message } from 'antd';

const treeData = [
  {
    title: '技术研发部',
    value: '0-0',
    key: '0-0',
    children: [
      {
        title: '前端开发组',
        value: '0-0-0',
        key: '0-0-0',
      },
    ],
  },
  {
    title: '产品设计部',
    value: '0-1',
    key: '0-1',
    children: [
      {
        title: '产品策划组',
        value: '0-1-0',
        key: '0-1-0',
      },
      {
        title: 'UX 设计组',
        value: '0-1-1',
        key: '0-1-1',
      },
      {
        title: '用户研究组',
        value: '0-1-2',
        key: '0-1-2',
      },
    ],
  },
];

const Demo = () => {
  return (
    <LightFilter
      initialValues={{
        sex: 'man',
      }}
      variant="outlined"
      collapseLabel={<FilterOutlined />}
      onFinish={async () => {
        message.success('提交成功');
      }}
    >
      <ProFormSelect
        name="sex"
        showSearch
        valueEnum={{
          man: '男',
          woman: '女',
        }}
        placeholder="性别"
      />
      <ProFormRadio.Group
        name="radio"
        radioType="button"
        options={[
          {
            value: 'weekly',
            label: '每周',
          },
          {
            value: 'quarterly',
            label: '每季度',
          },
          {
            value: 'monthly',
            label: '每月',
          },
          {
            value: 'yearly',
            label: '每年',
          },
        ]}
      />
      <ProFormDatePicker name="time" placeholder="日期" />
      <ProFormTreeSelect
        request={async () => treeData}
        fieldProps={{
          fieldNames: {
            label: 'title',
          },
          treeCheckable: true,
          showCheckedStrategy: TreeSelect.SHOW_PARENT,
          placeholder: 'Please select',
        }}
        name="treeSelect"
      />
      <ProFormCheckbox.Group
        name="checkbox"
        label="迁移类型"
        width="lg"
        options={['结构迁移', '全量迁移', '增量迁移', '全量校验']}
      />
      <ProFormCascader
        request={async () => [
          {
            value: 'zhejiang',
            label: '浙江',
            children: [
              {
                value: 'hangzhou',
                label: '杭州',
                children: [
                  {
                    value: 'xihu',
                    label: '西湖',
                  },
                ],
              },
            ],
          },
          {
            value: 'jiangsu',
            label: 'Jiangsu',
            children: [
              {
                value: 'nanjing',
                label: 'Nanjing',
                children: [
                  {
                    value: 'zhonghuamen',
                    label: 'Zhong Hua Men',
                  },
                ],
              },
            ],
          },
        ]}
        name="area"
      />
    </LightFilter>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

折叠模式下所有的选项都会默认折叠，不管是否有值，控件的 secondary 将不再有效。

轻量筛选-折叠模式

import { LightFilter } from '@ant-design/pro-components';
import { message } from 'antd';

const Demo = () => {
  return (
    <LightFilter
      initialValues={{
        sex: 'man',
      }}
      collapse
      onFinish={async () => {
        message.success('提交成功');
      }}
    >
      <LightFilter.select
        name="sex"
        label="性别"
        showSearch
        valueEnum={{
          man: '男',
          woman: '女',
        }}
      />
      <LightFilter.dateTime name="time" label="时间" />
    </LightFilter>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

手动设置轻量筛选的弹出框，默认为 bottomLeft

topLefttopRightbottomLeftbottomRight

轻量筛选-弹出框对齐方式

import {
  LightFilter,
  ProFormDatePicker,
  ProFormDateRangePicker,
  ProFormDateTimePicker,
  ProFormDateTimeRangePicker,
  ProFormDigit,
  ProFormFieldSet,
  ProFormSelect,
  ProFormSlider,
  ProFormSwitch,
  ProFormText,
  ProFormTimePicker,
} from '@ant-design/pro-components';
import { Radio } from 'antd';
import React from 'react';

const Demo = () => {
  const [mode, setMode] = React.useState<any>('topLeft');
  return (
    <div>
      <Radio.Group
        value={mode}
        onChange={(e) => {
          setMode(e.target.value);
        }}
      >
        <Radio.Button value="topLeft">topLeft</Radio.Button>
        <Radio.Button value="topRight">topRight</Radio.Button>
        <Radio.Button value="bottomLeft">bottomLeft</Radio.Button>
        <Radio.Button value="bottomRight">bottomRight</Radio.Button>
      </Radio.Group>
      <LightFilter
        placement={mode}
        style={{
          marginBlockStart: '40px',
        }}
      >
        <ProFormSelect
          name="sex"
          label="性别"
          showSearch
          allowClear={false}
          fieldProps={{
            labelInValue: true,
          }}
          valueEnum={{
            man: '男',
            woman: '女',
          }}
        />
        <ProFormSelect
          name="area"
          label="地区"
          mode="multiple"
          valueEnum={{
            beijing: '北京',
            shanghai: '上海',
            hangzhou: '杭州',
            long: '这是一个很长的用来测试溢出的项目',
          }}
        />
        <ProFormDigit name="count" label="数量" />
        <ProFormSlider name="range" label="范围" range />
        <ProFormSlider name="slider" label="范围" />
        <ProFormText name="name1" label="名称" />
        <ProFormSwitch name="open" label="开关" secondary />
        <ProFormText name="name2" label="地址" secondary />
        <ProFormDatePicker
          name="name3"
          label="不能清空的日期"
          allowClear={false}
        />
        <ProFormDateRangePicker name="date" label="日期范围" />
        <ProFormDateTimePicker name="datetime" label="日期时间" />
        <ProFormDateTimeRangePicker
          name="datetimeRanger"
          label="日期时间范围"
        />
        <ProFormTimePicker name="time" label="时间" />
        <ProFormTimePicker.RangePicker name="timeRanger" label="时间范围" />
        <ProFormFieldSet name="name" label="姓名">
          <ProFormText />
          <ProFormText />
        </ProFormFieldSet>
      </LightFilter>
    </div>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

API

QueryFilter

QueryFilter 除了继承 ProForm 的 API 以外还支持下面的属性。

参数	说明	类型	默认值
collapsed	是否折叠超出的表单项，用于受控模式	`boolean`	-
defaultCollapsed	默认状态下是否折叠超出的表单项	`boolean`	`true`
onCollapse	切换表单折叠状态时的回调	`(collapsed)=>void`	-
collapseRender	收起按钮的 render，设为 `false` 可隐藏	`((collapsed, props, intl, hiddenNum?) => ReactNode) \| false`	-
layout	布局模式，`vertical` 时上下布局	`'horizontal' \| 'vertical' \| 'inline'`	-
submitterColSpanProps	提交按钮所在 col 的 props（需要包含 `span`）	`Omit<ColProps, 'span'> & { span: number }`	-
defaultColsNumber	自定义折叠状态下默认显示的表单控件数量，最多只展示一行控件，超出时展示收起/隐藏按钮	`number`	-
defaultFormItemsNumber	与 defaultColsNumber 的不同点在于，设置多少就展示多少个控件，超出时展示收起/隐藏按钮	`number`	-
labelWidth	label 宽度	`number` \| `'auto'`	`80`
span	表单项宽度。对象形式可只传部分断点，未写档位按 antd 规则向前填充（如 `{ md: 8, xl: 6 }`）	`number` \| `Partial<{ xs: number; sm: number; md: number; lg: number; xl: number; xxl: number }>`	-
split	每一行是否有分割线（仅在 `layout=vertical` 时生效）	`boolean`	-
searchText	查询按钮的文本	`string`	-
resetText	重置按钮的文本	`string`	-
searchGutter	查询表单栅格间隔	`RowProps['gutter']`	-
optionRender	底部操作栏的 render，设为 `false` 可隐藏	`((searchConfig, props, dom) => ReactNode[]) \| false`	-
ignoreRules	忽略 Form.Item 的 rules 校验配置	`boolean`	-
showHiddenNum	收起时是否显示隐藏个数	`boolean`	`false`
preserve	是否能够查询收起的数据，如果设置为 false，收起后的表单数据将会丢失	`boolean`	`true`
containerStyle	容器样式	`React.CSSProperties`	-

响应式断点规则

注意，断点的值均为表单容器的大小而非视口大小。断点配置继承自 antd 设计 token，与 Grid 栅格的响应式断点保持一致。

默认布局时的规则

断点继承自 antd 设计 token（默认 xs=576、sm=768、md=992、lg=1200、xl=1600）：

容器宽度断点	单行展示表单列数（包含操作区域）	默认布局
`≧ 1600px`	4 列	`horizontal`
`≧ 768px && < 1600px`	3 列	`horizontal`
`≧ 576px && < 768px`	2 列	`vertical`
`< 576px`	1 列	`vertical`

强制上下布局时的规则

容器宽度断点	单行展示表单列数（包含操作区域）
`≧ 1600px`	4 列
`≧ 992px && < 1600px`	3 列
`≧ 576px && < 992px`	2 列
`< 576px`	1 列

LightFilter

LightFilter 除了继承 ProForm 的 API 以外还支持下面的属性。

参数	说明	类型	默认值
collapse	是否默认折叠全部字段	`boolean`	`false`
collapseLabel	折叠区域的标签	`ReactNode`	`更多筛选 <DownOutlined/>`
variant	样式变体	`'outlined' \| 'filled' \| 'borderless'`	`'borderless'`
ignoreRules	是否忽略表单项的 rules（LightFilter 场景一般不建议使用 rules）	`boolean`	-
footerRender	底部内容，当不需要默认底部按钮时，可以设为 `false`	`((onConfirm?: (e?: React.MouseEvent) => void, onClear?: (e?: React.MouseEvent) => void) => JSX.Element \| false) \| false`	-
popoverProps	透传给内部 Popover 的属性（折叠态弹层），可用 `classNames` 等	`Omit<PopoverProps, 'children' \| 'content' \| 'trigger' \| 'open' \| 'onOpenChange' \| 'placement'>`	-
placement	选择框弹出的位置，透传给 Popover，未设置时使用 Popover 默认值	`TooltipPlacement`	-

#QueryFilter / LightFilter 筛选表单

#查询筛选

#轻量筛选

#API

#QueryFilter

#响应式断点规则

#默认布局时的规则

#强制上下布局时的规则

#LightFilter

QueryFilter / LightFilter 筛选表单

查询筛选

轻量筛选

API

QueryFilter

响应式断点规则

默认布局时的规则

强制上下布局时的规则

LightFilter