前端开发中，表格组件是一个非常常见的需求。例如，在展示数据列表的页面中，通常需要有一个表格来展示数据，并且还需要支持用户输入关键字进行搜索，或者根据某些条件进行筛选。本文将介绍如何使用 React 和 Antd 实现带搜索和筛选功能的表格组件。
环境准备
本文使用 React 和 Antd 实现表格组件，所以需要先安装相关依赖。
- React
- Antd
可以使用 create-react-app 快速创建 React 项目，在项目中使用 npm 或者 yarn 安装 Antd。
实现思路
我们需要实现一个支持搜索和筛选的表格组件，其核心思路如下：
- 从后端获取数据，并渲染为表格形式。
- 添加搜索框，当用户输入关键字时，对表格中的数据进行过滤并重新渲染。
- 添加筛选条件，当用户选择条件时，对表格中的数据进行过滤并重新渲染。
下面就让我们逐一实现这三个步骤。
渲染数据
首先，我们需要从后端获取数据。这里假设我们的数据接口返回的数据格式为：
// www.javascriptcn.com code example
{
"data": [
{
"id": 1,
"name": "Tom",
"age": 20,
"gender": "male"
},
{
"id": 2,
"name": "Lucy",
"age": 25,
"gender": "female"
},
{
"id": 3,
"name": "Jack",
"age": 22,
"gender": "male"
}
]
}我们可以使用 Antd 的 Table 组件来将数据渲染成表格形式。示例代码如下：
// www.javascriptcn.com code example
import { Table } from 'antd';
const dataSource = [
{
id: 1,
name: 'Tom',
age: 20,
gender: 'male',
},
{
id: 2,
name: 'Lucy',
age: 25,
gender: 'female',
},
{
id: 3,
name: 'Jack',
age: 22,
gender: 'male',
},
];
const columns = [
{
title: 'ID',
dataIndex: 'id',
key: 'id',
},
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Gender',
dataIndex: 'gender',
key: 'gender',
},
];
function TableDemo() {
return <Table dataSource={dataSource} columns={columns} />;
}代码中，dataSource 是从后端获取的数据，columns 列出了表格中的每一列数据的格式。最后，将 dataSource 和 columns 传给 Table 组件即可将数据渲染成表格。
实现搜索功能
我们来添加搜索功能。Antd 的 Input 组件可以用来作为搜索框。当用户输入关键字时，我们需要根据关键字来过滤表格中的数据。
// www.javascriptcn.com code example
import { Table, Input } from 'antd';
import { useState } from 'react';
const { Search } = Input;
const dataSource = [
{
id: 1,
name: 'Tom',
age: 20,
gender: 'male',
},
{
id: 2,
name: 'Lucy',
age: 25,
gender: 'female',
},
{
id: 3,
name: 'Jack',
age: 22,
gender: 'male',
},
];
const columns = [
{
title: 'ID',
dataIndex: 'id',
key: 'id',
},
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Gender',
dataIndex: 'gender',
key: 'gender',
},
];
function TableDemo() {
const [searchKey, setSearchKey] = useState('');
const handleSearch = (value) => {
setSearchKey(value);
};
const filteredData = dataSource.filter((item) => {
return item.name.includes(searchKey);
});
return (
<>
<Search placeholder="输入关键字搜索" onSearch={handleSearch} />
<Table dataSource={filteredData} columns={columns} />
</>
);
}代码中，我们使用了 useState 来保存 searchKey 的值，这样可以实现在用户输入关键字时动态更新搜索结果。同时，我们还使用了 filter 方法对数据进行过滤，最终结果会渲染到 Table 中。
实现筛选功能
我们再来添加筛选功能。Antd 的 Select 组件可以用来作为筛选条件。当用户选择特定条件时，我们需要根据条件来过滤表格中的数据。
// www.javascriptcn.com code example
import { Table, Input, Select } from 'antd';
import { useState } from 'react';
const { Search } = Input;
const { Option } = Select;
const dataSource = [
{
id: 1,
name: 'Tom',
age: 20,
gender: 'male',
},
{
id: 2,
name: 'Lucy',
age: 25,
gender: 'female',
},
{
id: 3,
name: 'Jack',
age: 22,
gender: 'male',
},
];
const columns = [
{
title: 'ID',
dataIndex: 'id',
key: 'id',
},
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Gender',
dataIndex: 'gender',
key: 'gender',
},
];
function TableDemo() {
const [searchKey, setSearchKey] = useState('');
const [filterKey, setFilterKey] = useState('all');
const handleSearch = (value) => {
setSearchKey(value);
};
const handleFilter = (value) => {
setFilterKey(value);
};
const filteredData = dataSource.filter((item) => {
if (filterKey === 'all') {
return true;
}
return item.gender === filterKey;
}).filter((item) => {
return item.name.includes(searchKey);
});
return (
<>
<Search placeholder="输入关键字搜索" onSearch={handleSearch} />
<Select defaultValue="all" style={{ width: 120 }} onChange={handleFilter}>
<Option value="all">全部</Option>
<Option value="male">男</Option>
<Option value="female">女</Option>
</Select>
<Table dataSource={filteredData} columns={columns} />
</>
);
}代码中，我们添加了一个 Select 组件来实现筛选条件，包括 "全部"、"男"、"女" 三个选项。我们使用 useState 来保存 filterKey 的值，在 filter 中根据 filterKey 的值来过滤数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d64993a941bf7134bfd584