React Ant设计表-定制搜索过滤器

React Ant Design 表格（Table）组件提供了强大的定制搜索过滤器的功能，允许开发者根据特定需求对表格数据进行筛选。以下是关于定制搜索过滤器的基础概念、优势、类型、应用场景以及常见问题解决方法的详细解答。

基础概念

搜索过滤器是一种用户界面组件，允许用户输入关键词或选择条件来筛选显示的数据。在React Ant Design中，这通常通过结合Table组件和Input.Search组件来实现。

优势

用户体验提升：用户可以通过直观的搜索框快速找到所需信息。
数据管理便捷：对于大量数据的表格，搜索过滤器可以帮助用户聚焦于感兴趣的部分。
灵活性强：可以根据具体需求定制过滤逻辑，实现复杂的筛选条件。

类型

简单文本搜索：基于输入的关键字匹配表格中的文本字段。
多条件组合过滤：允许用户设置多个筛选条件，并通过逻辑运算符（如AND、OR）组合这些条件。
日期范围过滤：针对日期类型的字段，提供选择日期范围的过滤器。
下拉选择过滤：通过下拉菜单选择特定值来过滤数据。

应用场景

电商网站的商品列表：用户可以通过搜索栏查找特定商品。
企业管理系统的数据报表：管理员可以筛选查看特定时间段或状态的数据。
日志分析工具：开发者可以根据关键字或级别过滤日志信息。

示例代码

以下是一个简单的React Ant Design表格定制搜索过滤器的示例：

import React, { useState } from 'react';
import { Table, Input, Button, Space } from 'antd';
import { SearchOutlined } from '@ant-design/icons';

const dataSource = [
  // ... 数据源数组
];

const columns = [
  // ... 列定义数组
];

const App = () => {
  const [searchText, setSearchText] = useState('');
  const [searchedColumn, setSearchedColumn] = useState('');

  const handleSearch = (selectedKeys, confirm, dataIndex) => {
    confirm();
    setSearchText(selectedKeys[0]);
    setSearchedColumn(dataIndex);
  };

  const handleReset = (clearFilters) => {
    clearFilters();
    setSearchText('');
  };

  const getColumnSearchProps = (dataIndex) => ({
    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
      <div style={{ padding: 8 }}>
        <Input
          placeholder={`Search ${dataIndex}`}
          value={selectedKeys[0]}
          onChange={(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
          onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}
          style={{ width: 188, marginBottom: 8, display: 'block' }}
        />
        <Space>
          <Button
            type="primary"
            onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
            icon={<SearchOutlined />}
            size="small"
            style={{ width: 90 }}
          >
            Search
          </Button>
          <Button onClick={() => handleReset(clearFilters)} size="small" style={{ width: 90 }}>
            Reset
          </Button>
        </Space>
      </div>
    ),
    filterIcon: (filtered) => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
    onFilter: (value, record) =>
      record[dataIndex] ? record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()) : '',
    onFilterDropdownVisibleChange: (visible) => {
      if (visible) {
        // setTimeout(() => searchInput.select(), 100);
      }
    },
    render: (text) => (searchedColumn === dataIndex ? <Highlighter /> : text),
  });

  return (
    <Table
      columns={columns.map((col) => ({ ...col, ...getColumnSearchProps(col.dataIndex) }))}
      dataSource={dataSource}
      pagination={{ pageSize: 10 }}
    />
  );
};

export default App;