AntD React Table多筛选实现问题：电话与邮箱筛选功能异常

嘿，我明白你现在遇到的麻烦——官方示例只有单个筛选器，自己加了电话和邮箱筛选后却没法正常工作对吧？别担心，我帮你梳理下问题，再给你一个完整的解决方案。

核心问题分析 #

你之前的代码大概率是没处理多筛选条件的组合逻辑，或者筛选器的状态更新和数据过滤没有联动起来。AntD Table的默认列筛选是独立的，但如果要多个正则筛选同时生效，我们需要把所有筛选条件整合到数据过滤逻辑里，而不是只依赖单个列的onFilter。

完整修正代码 #

下面是调整后的组件代码，我加入了三个筛选器（姓名、电话、邮箱），全部用正则实现，并且支持多条件同时筛选：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Table, Input, Button, Icon } from 'antd';
import { mockData } from '../../../mockData';

class ContactTable extends Component {
  state = {
    // 维护所有筛选器的输入值
    filterValues: {
      name: '',
      phone: '',
      email: ''
    }
  };

  // 根据所有筛选条件过滤数据
  getFilteredDataSource = () => {
    const { filterValues } = this.state;
    return mockData.filter(record => {
      // 正则匹配，忽略大小写，空值时不筛选该字段
      const matchesName = filterValues.name 
        ? new RegExp(filterValues.name, 'i').test(record.name) 
        : true;
      const matchesPhone = filterValues.phone 
        ? new RegExp(filterValues.phone, 'i').test(record.phone) 
        : true;
      const matchesEmail = filterValues.email 
        ? new RegExp(filterValues.email, 'i').test(record.email) 
        : true;
      // 所有条件都满足才保留这条数据
      return matchesName && matchesPhone && matchesEmail;
    });
  };

  // 更新指定字段的筛选值
  updateFilterValue = (key, value) => {
    this.setState(prevState => ({
      filterValues: {
        ...prevState.filterValues,
        [key]: value
      }
    }));
  };

  render() {
    const columns = [
      {
        title: '姓名',
        dataIndex: 'name',
        filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
          <div style={{ padding: 8 }}>
            <Input
              placeholder="输入姓名关键词"
              value={selectedKeys[0]}
              onChange={(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
              onPressEnter={() => confirm()}
              style={{ width: 188, marginBottom: 8, display: 'block' }}
            />
            <Button
              type="primary"
              onClick={() => {
                this.updateFilterValue('name', selectedKeys[0] || '');
                confirm();
              }}
              icon="search"
              size="small"
              style={{ width: 90, marginRight: 8 }}
            >
              搜索
            </Button>
            <Button
              onClick={() => {
                this.updateFilterValue('name', '');
                clearFilters();
              }}
              size="small"
              style={{ width: 90 }}
            >
              重置
            </Button>
          </div>
        ),
        filterIcon: filtered => <Icon type="search" style={{ color: filtered ? '#1890ff' : undefined }} />,
        // 这里的onFilter只是为了让筛选图标高亮，实际过滤逻辑在getFilteredDataSource里
        onFilter: (value) => !!value,
        render: text => text
      },
      {
        title: '电话',
        dataIndex: 'phone',
        filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
          <div style={{ padding: 8 }}>
            <Input
              placeholder="输入电话关键词"
              value={selectedKeys[0]}
              onChange={(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
              onPressEnter={() => confirm()}
              style={{ width: 188, marginBottom: 8, display: 'block' }}
            />
            <Button
              type="primary"
              onClick={() => {
                this.updateFilterValue('phone', selectedKeys[0] || '');
                confirm();
              }}
              icon="search"
              size="small"
              style={{ width: 90, marginRight: 8 }}
            >
              搜索
            </Button>
            <Button
              onClick={() => {
                this.updateFilterValue('phone', '');
                clearFilters();
              }}
              size="small"
              style={{ width: 90 }}
            >
              重置
            </Button>
          </div>
        ),
        filterIcon: filtered => <Icon type="search" style={{ color: filtered ? '#1890ff' : undefined }} />,
        onFilter: (value) => !!value,
        render: text => text
      },
      {
        title: '邮箱',
        dataIndex: 'email',
        filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
          <div style={{ padding: 8 }}>
            <Input
              placeholder="输入邮箱关键词"
              value={selectedKeys[0]}
              onChange={(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
              onPressEnter={() => confirm()}
              style={{ width: 188, marginBottom: 8, display: 'block' }}
            />
            <Button
              type="primary"
              onClick={() => {
                this.updateFilterValue('email', selectedKeys[0] || '');
                confirm();
              }}
              icon="search"
              size="small"
              style={{ width: 90, marginRight: 8 }}
            >
              搜索
            </Button>
            <Button
              onClick={() => {
                this.updateFilterValue('email', '');
                clearFilters();
              }}
              size="small"
              style={{ width: 90 }}
            >
              重置
            </Button>
          </div>
        ),
        filterIcon: filtered => <Icon type="search" style={{ color: filtered ? '#1890ff' : undefined }} />,
        onFilter: (value) => !!value,
        render: text => text
      }
      // 其他列可以继续添加
    ];

    return (
      <Table
        columns={columns}
        dataSource={this.getFilteredDataSource()}
        rowKey="id"
      />
    );
  }
}

export default connect()(ContactTable);

关键调整点说明 #

1. 统一维护筛选状态：用filterValues对象存储三个筛选器的输入值，确保状态统一管理。
2. 全局数据过滤：通过getFilteredDataSource方法整合所有正则筛选条件，只有满足所有条件的数据才会显示。
3. 筛选器状态联动：点击搜索/重置按钮时，同步更新filterValues，并触发表格重新渲染。
4. 正则匹配优化：用'i'标志忽略大小写，空值时跳过该字段的筛选，避免无意义的过滤。

这样调整后，你的电话和邮箱筛选应该就能正常工作了，而且三个筛选器可以同时生效哦～

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