因为搜索页面只有一个字段搜索查看,就前端做了一个字段过滤更新表格内容
import React, { useState } from 'react';
import { Table, Input } from 'antd';
const TableFilter = () => {
const {Search} = Input
const [originalData, setOriginalData] = useState(/* 从后端获取的原始数据 */);
const [data, setData] = useState(originalData);
const [searchText, setSearchText] = useState('');
const handleSearch = (value) => {
// 根据搜索名称过滤数据
const filteredData = originalData.filter(item =>
// filter 过滤数据要有返回值
return Object.values(item).some(val =>
val.toString().toLowerCase().includes(value.toLowerCase())
)
);
//将过滤搜索出来的内容给表格
setData(filteredData);
};
// 表格列配置
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
];
return (
<div>
<Search
placeholder="Search..."
allowClear
onSearch={(value) => handleSearch(value)}
value={searchText}
onChange={(e) => {
setSearchText(e.target.value);
// 在搜索框清空时,恢复原始数据
if (e.target.value === '') {
setData(originalData);
}
}}
/>
<Table
dataSource={data}
columns={columns}
pagination={false}
/>
</div>
);
};
export default TableFilter;