如何获取Antd Table选中的筛选选项并触发API请求？

要实现选择筛选选项后向API发送请求，核心是通过Antd Table的onChange事件获取当前筛选状态，再基于筛选值发起请求。具体步骤和代码示例如下：

1. 给Table绑定onChange事件 #

Table组件的onChange会返回分页、筛选、排序等状态参数，其中filters对象包含所有列的选中筛选值。

2. 提取目标列的筛选值 #

从filters中根据列的dataIndex（这里是OS）取出选中的筛选值，Antd默认支持多选，所以返回的是一个数组。

3. 构造请求并更新数据 #

用提取到的筛选值构造API请求参数，发起请求后更新Table的数据源。

完整代码示例 #

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

// 你的列配置
const columns = [
  {
    title: SECURITY_KEY_DEVICES_TABLE.OS,
    dataIndex: 'OS',
    key: 'OS',
    align: 'center',
    render: (data) => {
      return <span style={{ fontSize: '1rem' }}>{data}</span>;
    },
    filters: [
      { text: 'Android', value: 'android' },
      { text: 'IOS', value: 'ios' },
      { text: 'Windows', value: 'windows' },
    ],
    onFilter: (value, row) => value === row.OS,
  },
  // 其他列配置...
];

const DeviceTable = () => {
  const [tableData, setTableData] = useState([]);

  // API请求函数
  const fetchDeviceData = async (filterParams) => {
    try {
      // 替换为你的实际API地址和请求方式
      const res = await fetch('/api/devices', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(filterParams),
      });
      const data = await res.json();
      setTableData(data);
    } catch (err) {
      console.error('数据请求失败:', err);
    }
  };

  // Table状态变化处理
  const handleTableChange = (_, filters) => {
    // 获取OS列选中的筛选值，无选中时返回空数组
    const selectedOsFilters = filters.OS || [];
    // 根据后端要求构造请求参数，这里示例用逗号分隔多选值
    const requestParams = {
      os: selectedOsFilters.length ? selectedOsFilters.join(',') : null,
      // 其他筛选参数可在此添加
    };
    // 触发API请求
    fetchDeviceData(requestParams);
  };

  // 初始加载数据
  useEffect(() => {
    fetchDeviceData({});
  }, []);

  return (
    <Table
      columns={columns}
      dataSource={tableData}
      onChange={handleTableChange}
      rowKey="id" // 替换为你的数据唯一标识字段
    />
  );
};

export default DeviceTable;

关键说明 #

• filters.OS返回数组类型，支持多选场景；如果是单选需求，直接取数组第一个元素即可（selectedOsFilters[0]）
• 可根据后端API的参数格式调整requestParams的结构，比如直接传递数组或单个值
• 类组件写法逻辑一致，只需将状态和方法挂载到this.state和this上即可

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