antd table表头有多个筛选时

<think>我们讨论的是在Ant Design（antd）的Table组件中，表头有多个筛选条件的情况。 通常，我们可以通过配置columns中的filterDropdown属性来实现自定义的筛选菜单，同时可能结合filteredValue来控制当前筛选状态。 基本步骤： 1. 在columns中，为需要筛选的列配置filterDropdown，这是一个返回React节点的函数，可以在这里放置多个筛选控件（如Input、Select、DatePicker等）。 2. 使用filteredValue来设置当前列的筛选值（一个数组或单一值，取决于你的筛选逻辑），当有筛选时，表格会根据这个值来过滤数据。 3. 在自定义的筛选菜单中，你需要自己处理筛选逻辑的触发（比如点击“确定”按钮时），然后通过调用confirm函数来关闭下拉菜单，并更新filteredValue。 4. 你可能需要维护一个状态来存储每个筛选器的值，然后在数据源（dataSource）上应用这些筛选条件。 注意：antd Table本身不提供内置的多条件筛选（比如多个输入框组合筛选），所以需要自己实现筛选逻辑。 以下是一个简单的示例，展示如何在一个列上使用两个输入框（例如，最小值和最大值）进行范围筛选。 我们将以“年龄”列为例，设置两个输入框分别输入最小年龄和最大年龄，然后根据这个范围筛选。 代码示例（使用React Hooks）：</think>在 Ant Design (antd) 的 Table 组件中，实现表头多个筛选条件时，通常需要结合 `filterDropdown` 自定义筛选菜单和状态管理。以下是关键实现步骤： ### 核心实现方案 1. **状态管理** 使用 React 状态（如 `useState`）存储每个列的筛选值： ```jsx const [filters, setFilters] = useState({ name: null, age: [null, null], // 年龄范围 [min, max] status: null, }); ``` 2. **自定义筛选菜单** 在 `columns` 配置中使用 `filterDropdown` 渲染复杂筛选器： ```jsx const columns = [ { title: '年龄', dataIndex: 'age', filterDropdown: ({ confirm }) => ( <div style={{ padding: 8 }}> <InputNumber placeholder="最小值" onChange={min => setFilters({...filters, age: [min, filters.age?.[1]]})} /> <InputNumber placeholder="最大值" onChange={max => setFilters({...filters, age: [filters.age?.[0], max]})} /> <Button onClick={() => confirm()}>确认</Button> </div> ), filteredValue: filters.age || [], }, // 其他列配置... ]; ``` 3. **数据筛选逻辑** 在 `onChange` 事件中处理多条件过滤： ```jsx <Table dataSource={rawData.filter(item => ( (!filters.name || item.name.includes(filters.name)) && (!filters.age[0] || item.age >= filters.age[0]) && (!filters.age[1] || item.age <= filters.age[1]) && (!filters.status || item.status === filters.status) ))} columns={columns} onChange={(pagination, _, sorter) => { /* 分页/排序处理 */ }} /> ``` 4. **重置筛选** 添加重置按钮清除筛选状态： ```jsx <Button onClick={() => setFilters({ name: null, age: [null, null], status: null })}> 重置筛选 </Button> ``` ### 注意事项 - **性能优化**：大数据量时使用防抖处理输入 - **UI一致性**：通过 `filterIcon` 自定义图标高亮筛选状态 - **空值处理**：显式处理 `null`/`undefined` 避免渲染错误 - **TypeScript**：建议定义完整的类型声明 完整示例见 [Ant Design Table 筛选文档](https://ant.design/components/table#components-table-demo-custom-filter-panel)。