如何在ant-design中基于函数组件实现表格列级别搜索功能

完整代码示例 #

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

// 模拟表格数据源
const dataSource = [
  {
    key: '1',
    name: '张三',
    age: 32,
    address: '北京市朝阳区',
  },
  {
    key: '2',
    name: '李四',
    age: 42,
    address: '上海市静安区',
  },
  {
    key: '3',
    name: '王五',
    age: 38,
    address: '广州市天河区',
  },
];

const TableWithColumnSearch = () => {
  // 托管搜索状态
  const [searchText, setSearchText] = useState('');
  const [searchedColumn, setSearchedColumn] = useState('');

  // 生成列搜索配置的工具函数
  const getColumnSearchProps = (dataIndex) => ({
    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
      <div style={{ padding: 8 }}>
        <Input
          placeholder={`搜索${dataIndex}`}
          value={selectedKeys[0]}
          onChange={(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
          onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}
          style={{ marginBottom: 8, display: 'block' }}
        />
        <Space>
          <Button
            type="primary"
            onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
            icon={<SearchOutlined />}
            size="small"
            style={{ width: 90 }}
          >
            搜索
          </Button>
          <Button onClick={() => handleReset(clearFilters)} size="small" style={{ width: 90 }}>
            重置
          </Button>
        </Space>
      </div>
    ),
    filterIcon: (filtered) => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
    onFilter: (value, record) =>
      record[dataIndex] ? record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()) : '',
  });

  // 搜索触发逻辑
  const handleSearch = (selectedKeys, confirm, dataIndex) => {
    confirm();
    setSearchText(selectedKeys[0]);
    setSearchedColumn(dataIndex);
  };

  // 重置搜索逻辑
  const handleReset = (clearFilters) => {
    clearFilters();
    setSearchText('');
  };

  // 表格列配置
  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      width: '20%',
      ...getColumnSearchProps('name'),
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
      width: '20%',
      ...getColumnSearchProps('age'),
    },
    {
      title: '住址',
      dataIndex: 'address',
      key: 'address',
      ...getColumnSearchProps('address'),
    },
  ];

  return <Table columns={columns} dataSource={dataSource} />;
};

export default TableWithColumnSearch;

关键说明 #

• 类组件的状态全部替换为useState钩子托管，无需处理this绑定问题
• getColumnSearchProps工具函数直接在组件内部定义，可直接访问组件内的状态和状态修改方法
• 如果需要支持多列同时搜索，可将searchText修改为对象结构，每个键对应一列的搜索关键词，过滤逻辑中同时匹配所有列的关键词即可
• 可按需调整触发逻辑，比如删除搜索按钮，监听Input的onChange事件直接触发过滤，实现实时搜索效果

内容的提问来源于stack exchange，提问作者sssss