Ant Design Table组件执行过滤后如何获取筛选后的数据源？

嘿，这个问题我之前也碰到过！Ant Design的Table组件确实没有直接提供获取筛选后数据的现成API，但咱们可以通过几种靠谱的方式来实现，下面给你分享几个实用方案：

这是最稳妥也最灵活的方式，利用onChange回调返回的筛选、排序等条件，自己对原始的dataSource进行过滤处理。直接上代码示例：

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

const MyTable = () => {
  // 原始数据源
  const originalDataSource = [
    { id: 1, name: '张三', age: 25, department: '技术部' },
    { id: 2, name: '李四', age: 30, department: '市场部' },
    { id: 3, name: '王五', age: 28, department: '技术部' },
    // 更多数据...
  ];
  // 用于存储筛选/排序后的结果
  const [processedData, setProcessedData] = useState(originalDataSource);

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

    // 处理筛选条件
    Object.entries(filters).forEach(([key, values]) => {
      if (values.length > 0) {
        tempData = tempData.filter(item => values.includes(item[key]));
      }
    });

    // 处理排序逻辑（如果需要的话）
    if (sorter.field && sorter.order) {
      tempData = tempData.sort((a, b) => {
        const isAscend = sorter.order === 'ascend';
        if (a[sorter.field] > b[sorter.field]) return isAscend ? 1 : -1;
        if (a[sorter.field] < b[sorter.field]) return isAscend ? -1 : 1;
        return 0;
      });
    }

    // 更新处理后的数据
    setProcessedData(tempData);
  };

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

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

export default MyTable;

这个方法的优势在于完全可控，不管是简单的等值筛选还是复杂的自定义过滤逻辑，你都能自己实现，而且不依赖组件内部的未公开API，稳定性拉满。

如果你的表格数据是后端分页或者后端处理筛选的，那根本不用前端自己过滤——onChange回调里拿到筛选、分页条件后，传给后端接口，接口返回的就是已经筛选好的数据，直接用这个数据更新表格的dataSource就完事了，这也是实际项目中最常用的方式之一。

有些朋友可能会想着通过Table的ref去拿内部状态，或者通过DOM元素提取渲染后的行数据，但这些方法都依赖Ant Design的内部实现细节，版本更新很可能就失效了，生产环境千万慎用！

总结一下，优先选方案一（前端过滤）或者方案二（后端处理），这两个都是官方推荐的思路，靠谱又好维护。

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