### 如何在
React 中使用 Ant Design 实现
表格表头的筛选功能
####
表格组件介绍
Ant Design 提供了
一个强大的 `
Table` 组件，支持多种交互操作，其中包括列过滤功能。此特性允许用户基于特定条件筛选数据。
#### 安装依赖包
为了能够正常使用 Ant Design 的
Table 和其他所需组件，需先安装
antd 库：
```bash
npm install
antd --save
```
#### 创建带有筛选功能的
表格实例
下面是
一个简单的例子来展示如何创建具有筛选能力的
表格[^1]：
```
jsx
import
React, { useState } from '
react';
import {
Table, Input,
Button, Space } from '
antd';
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
sorter: (a, b) => a
.name
.localeCompare(b
.name),
filterDropdown: ({ setSelectedKeys, selectedKeys, confirm }) => (
<div style={{ padding: 8 }}>
<Input
placeholder="Search name"
value={selectedKeys[0]}
onChange={(e) =>
setSelectedKeys(e
.target
.value ? [e
.target
.value] : [])
}
onPressEnter={() => handleSearch(selectedKeys, confirm)}
style={{ width: 188, marginBottom: 8, display: 'block' }}
/>
<Space>
<
Button
type="primary"
onClick={() => handleSearch(selectedKeys, confirm)}
icon={<SearchOutlined />}
size="small"
style={{ width: 90 }}
>
Search
</
Button>
<
Button
onClick={() => handleReset(confirm)}
size="small"
style={{ width: 90 }}
>
Reset
</
Button>
</Space>
</div>
),
filterIcon: (filtered) => (
<SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />
),
onFilter: (value, record) =>
record
.name
.toString()
.toLowerCase()
.includes(value
.toLowerCase()),
},
];
//
假设的数据源
const data = [];
for (let i = 0; i < 46; i++) {
data
.push({
key: i,
name: `Edward King ${i}`,
});
}
function App() {
const [searchText, setSearchText] = useState('');
function handleSearch(selectedKeys, confirm) {
confirm();
setSearchText(selectedKeys[0]);
}
function handleReset(clearFilters) {
clearFilters();
setSearchText('');
}
return <
Table columns={columns} dataSource={data} />;
}
export default App;
```
上述代码展示了如何配置自定义的筛选器，并将其应用于名为 "Name" 的列上。这里实现了文本输入框作为筛选界面的一部分，以及相应的确认和重置
按钮逻辑。
#### 关键点说明
- **filterDropdown**: 自定义下拉菜单的内容。
- **onFilter**: 判断某条记录是否应该显示给定的筛选条件下。
- **setSelectedKeys**, **handleSearch** 及 **handleReset**: 控制筛选状态并触发重新渲染。
通过这种方式可以轻松扩展到更多类型的字段和其他复杂场景下的筛选需求。
这篇博客探讨了如何在使用columns渲染的Table表头中添加一个'add'按钮。作者遇到了渲染问题，尝试使用插槽方法但未能成功。文中提到可以通过自定义title属性并返回函数的方式来实现这一功能。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
457
