一个基于 React 和 Ant Design 的灵活筛选表单 component，用于快速构建具有展开/收起功能的响应式筛选界面。
查看在线文档和示例
- �� 支持展开/收起功能
- 🔄 响应式布局
- 📦 开箱即用
- 🎨 基于 Ant Design
- 💡 TypeScript 支持
- ⚡️ 轻量级设计
npm install use-antd-filter # 或 yarn add use-antd-filterimport { FilterForm } from 'use-antd-filter'; const handleFilterChange = (filters: Record<string, string>) => { console.log('Filters changed:', filters); }; const filters: IFilters = [ { label: '账单时间', name: 'time', renderType: 'dateRangePicker', props: { placeholder: ['开始时间', '结束时间'], }, }, { label: '所属问题', name: 'data_type_desc', renderType: 'select', props: { options: [{ label: '问题1', value: '1' }, { label: '问题2', value: '2' }], showSearch: true, }, }, { label: '申请单号', name: 'ids', renderType: 'input', props: { placeholder: '支持空格或英文逗号分隔批量查询', }, }, { label: '状态', name: 'statusList', renderType: 'select', props: { options: [ { value: '0', label: '暂存' }, { value: '1', label: '询价中' }, { value: '2', label: '审批中' }, { value: '3', label: '下架中' }, { value: '4', label: '出库中' }, { value: '5', label: '运输中' }, { value: '6', label: '已完成' }, { value: '7', label: '已中止' }, ], placeholder: '支持多选', mode: 'multiple', showSearch: true, optionFilterProp: "label" }, }, { label: '单号', name: 'code', renderType: 'input', props: { placeholder: '支持空格或英文逗号分隔批量查询', }, }, ]; // 或使用内置组件 const YourPage = () => { return ( <FilterForm filters={filters} onFilterChange={handleFilterChange} /> ); };| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| filters | 筛选项的集合 | [] | [] |
| defaultExpanded | 是否默认展开 | boolean | false |
| onFilterChange | 筛选条件变化时的回调 | (filters: Record<string, string>) => void | - |
| onOkText | 查询按钮文字 | string | 查询 |
| onResetText | 重置按钮文字 | string | 清空 |