如何获取Ant Design Table组件过滤后的当前数据状态？

方案1：手动接管过滤逻辑，维护过滤后数据集 #

Ant Design Table的内置过滤是在组件内部处理的，不会直接暴露过滤后的数据源。你可以自己管控过滤流程：

• 用状态存储当前的过滤条件（比如搜索关键词、列过滤选项）
• 每次过滤条件变化时，手动对原始dataSource执行过滤计算，得到处理后的数据集
• 将这个处理后的数据集传给Table的dataSource属性，同时你可以直接访问该数据集做其他操作

示例代码：

import { Table, Input } from 'antd';
import { useState } from 'react';

const FilterTable = () => {
  const [rawData] = useState([
    { id: 1, name: '张三', age: 25 },
    { id: 2, name: '李四', age: 30 },
    { id: 3, name: '王五', age: 28 },
  ]);
  const [searchText, setSearchText] = useState('');
  const [filteredData, setFilteredData] = useState(rawData);

  const handleSearch = (value) => {
    setSearchText(value);
    const result = rawData.filter(item => 
      item.name.toLowerCase().includes(value.toLowerCase())
    );
    setFilteredData(result);
  };

  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      filterDropdown: () => (
        <Input
          placeholder="搜索姓名"
          value={searchText}
          onChange={(e) => handleSearch(e.target.value)}
          style={{ margin: 8 }}
        />
      ),
      render: (text) => text,
    },
    {
      title: '年龄',
      dataIndex: 'age',
    },
  ];

  // 直接使用filteredData即可获取过滤后的结果
  console.log('过滤后的数据：', filteredData);

  return <Table columns={columns} dataSource={filteredData} rowKey="id" />;
};

export default FilterTable;

方案2：通过onChange回调获取过滤参数，二次计算结果 #

Table的onChange回调会返回当前的分页、过滤、排序参数，你可以利用这些参数对原始数据重新计算，得到过滤后的数据集：

• 监听onChange事件，拿到filters（列过滤条件）、sorter（排序条件）等参数
• 根据这些参数对原始dataSource执行过滤、排序操作，得到最终结果

示例代码：

import { Table } from 'antd';
import { useState } from 'react';

const FilterTable = () => {
  const [rawData] = useState([
    { id: 1, name: '张三', age: 25, department: '技术部' },
    { id: 2, name: '李四', age: 30, department: '市场部' },
    { id: 3, name: '王五', age: 28, department: '技术部' },
  ]);
  const [currentFilteredData, setCurrentFilteredData] = useState(rawData);

  const handleTableChange = (pagination, filters, sorter) => {
    let processedData = [...rawData];

    // 处理列过滤
    Object.keys(filters).forEach(key => {
      if (filters[key]?.length) {
        processedData = processedData.filter(item => filters[key].includes(item[key]));
      }
    });

    // 处理排序
    if (sorter.field && sorter.order) {
      processedData = processedData.sort((a, b) => {
        const isAsc = sorter.order === 'ascend';
        return a[sorter.field] > b[sorter.field] ? (isAsc ? 1 : -1) : (isAsc ? -1 : 1);
      });
    }

    setCurrentFilteredData(processedData);
  };

  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
    },
    {
      title: '年龄',
      dataIndex: 'age',
    },
    {
      title: '部门',
      dataIndex: 'department',
      filters: [
        { text: '技术部', value: '技术部' },
        { text: '市场部', value: '市场部' },
      ],
      onFilter: (value, record) => record.department === value,
    },
  ];

  return (
    <Table
      columns={columns}
      dataSource={rawData}
      rowKey="id"
      onChange={handleTableChange}
    />
  );
};

export default FilterTable;

注意事项 #

• 若使用远程数据模式（通过分页回调请求后端接口），过滤后的结果直接取自后端返回数据，无需前端处理
• 手动处理过滤逻辑时，要保证过滤条件与Table的UI状态同步，避免出现显示数据与实际过滤结果不一致的情况

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