高级

梗概

Antd Table远程筛选是指将筛选逻辑放在服务端处理，适合大数据量或复杂筛选场景。前端负责收集筛选条件并发送给后端，后端返回筛选后的数据。

基本实现方法

1. 配置筛选属性

在列配置中设置 filters 和 onFilter 属性：

const columns = [
  {
    title: '状态',
    dataIndex: 'status',
    filters: [
      { text: '已发布', value: 'published' },
      { text: '未发布', value: 'unpublished' },
    ],
    // 本地筛选函数可以简单返回true，实际筛选由后端处理
    onFilter: (value, record) => true,
  }
];

2. 监听表格变化

使用 onChange 回调获取筛选参数并触发数据请求：

const handleTableChange = (pagination, filters, sorter) => {
  // 将筛选参数、分页和排序信息发送到后端
  fetchData({
    current: pagination.current,
    pageSize: pagination.pageSize,
    ...filters,
    sortField: sorter.field,
    sortOrder: sorter.order,
  });
};
 
<Table
  columns={columns}
  dataSource={data}
  onChange={handleTableChange}
  pagination={{
    current: currentPage,
    pageSize: pageSize,
    total: total,
  }}
/>

3. 请求后端数据

实现数据获取函数，将筛选参数发送到API：

const fetchData = async (params = {}) => {
  try {
    const response = await axios.get('/api/data', {
      params: {
        page: params.current || 1,
        pageSize: params.pageSize || 10,
        status: params.status, // 筛选参数
        // 其他筛选条件...
      }
    });
    setData(response.data.list);
    setTotal(response.data.total);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

高级用法

1. 自定义筛选菜单

使用 filterDropdown 实现更复杂的筛选界面：

{
  title: '价格范围',
  dataIndex: 'price',
  filterDropdown: ({ setSelectedKeys, selectedKeys, confirm }) => (
    <div style={{ padding: 8 }}>
      <InputNumber 
        style={{ width: 100, marginRight: 8 }}
        placeholder="最低价"
        onChange={value => setSelectedKeys([value, selectedKeys[1]])}
      />
      <InputNumber 
        style={{ width: 100 }}
        placeholder="最高价"
        onChange={value => setSelectedKeys([selectedKeys[0], value])}
      />
      <Button onClick={confirm}>确定</Button>
    </div>
  ),
  onFilter: (value, record) => true, // 实际筛选由后端处理
}

2. 重置筛选状态

添加重置按钮清除筛选条件：

const handleResetFilters = () => {
  setFilters({});
  fetchData({ current: 1 }); // 重置到第一页
};
 
<Button onClick={handleResetFilters}>重置筛选</Button>

3. 防抖处理

对频繁触发的筛选操作进行防抖：

import { debounce } from 'lodash';
 
const debouncedFetchData = debounce(fetchData, 300);
 
const handleTableChange = (pagination, filters, sorter) => {
  debouncedFetchData({
    current: pagination.current,
    pageSize: pagination.pageSize,
    ...filters,
    sortField: sorter.field,
    sortOrder: sorter.order,
  });
};

注意事项

分页处理

远程筛选时通常需要重置到第一页，避免筛选后仍停留在高页码导致无数据

参数转换

可能需要将Antd的筛选参数转换为后端API需要的格式

加载状态

添加loading状态提升用户体验：

const [loading, setLoading] = useState(false);
 
const fetchData = async (params = {}) => {
  setLoading(true);
  try {
    // API调用
  } finally {
    setLoading(false);
  }
};
 
<Table loading={loading} ... />

空值处理

清除筛选时要正确处理空值情况，避免发送无效参数

🪴qql1's digital garden

探索

Table远程筛选

梗概