antd-table filterDropdowm封装自定义筛选框

本文链接：https://blog.youkuaiyun.com/cherry__yu/article/details/121901886

本文讲述了在Ant Design Table组件中如何处理前端分页情况下进行后端筛选的需求。由于直接使用onFilter会导致多次请求，作者选择了使用filterDropdown属性来自定义筛选菜单，实现了筛选操作时仅发送一次请求，并封装了一个可复用的filterDropdown函数，提高了代码的可维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求

在这里插入图片描述
现在有一个在table里面做筛选的需求，在antd的table文档里很容易找到相关API，在官方的例子中是用filters定义菜单数据，用onFilter监控变化。
官方例子：

{
title: 'Address',
dataIndex: 'address',
filters: [
  {
    text: 'London',
    value: 'London',
  },
  {
    text: 'New York',
    value: 'New York',
  },
],
onFilter: (value, record) => record.address.indexOf(value) === 0,
},

我们的项目前端做了分页，在前端做筛选是不合适的，数据集不完整；所以筛选是在后端做的，我们需要的是让请求带上筛选字段传过去。

onFilter/onChange

刚开始我想当然在onFilter里做，因为onFIlter可以拿到当前筛选的value，但是在控制台发现在筛选操作时发出了很多条相同的请求。
看了下onFilter的源码：
在这里插入图片描述
可以看到onFilter是对data里的每一个record，也就是每条列表数据执行一次onFilter方法，如果把后端交互写在onFilter中，就会执行多次。所以不能使用onFilter。
这时候我想使用的是Table的onChange，这个函数有三个入参，pagination、filter和sort，也就是可以监听table的页码、筛选和排序信息，但是由于我们项目的pagination是自定义的类，如果用onChange，要多做一些antd内置pagination和自定义pagination类的判断，不然就会有冗余请求。

filterDropdown

最后选择使用filterDropdown这个属性，也就是自定义筛选菜单，交互也是自己写，自由度很高。为了可复用性高，将其封装为一个函数。
该函数仅需传入筛选操作发生时要执行的函数，其他参数从antd给的props里取。由此依然可以用antd的filters等api。返回一个完整的菜单组件。

// 封装的filterDropdown函数，
export const getColumnCheckboxGroupFilterDropdown = (onSearch: (value: string[]) => void) => (
  props: FilterDropdownProps
) => {
  const { setSelectedKeys, selectedKeys, filters, confirm, clearFilters } = props;
  const onChange = (checkedValues: string[]) => {
    setSelectedKeys(checkedValues);
  };
  const clear = () => {
    setSelectedKeys([]);
    onSearch([]);
    clearFilters();
  };
  const onOk = () => {
    onSearch(selectedKeys as string[]);
    confirm();
  };
  return (
    <div className="filter-content">
      <Checkbox.Group onChange={onChange} value={selectedKeys}>
        {filters?.map((item) => (
          <Checkbox value={item.value} key={item.value as string}>
            {item.text}
          </Checkbox>
        ))}
      </Checkbox.Group>
      <Divider />
      <div className="footer">
        <Button type="link" disabled={!selectedKeys?.length} onClick={clear}>
          Reset
        </Button>
        <Button type="primary" onClick={onOk}>
          OK
        </Button>
      </div>
    </div>
  );
};

// 在定义table column时使用
{
  dataIndex: 'sth',
  title: 'title',
  filters: [
    {
      text: 'filter1',
      value: 'filter1',
    },
    {
      text: 'filter2',
      value: 'filter2',
    },
  ],
  filterDropdown: getColumnCheckboxGroupFilterDropdown(
    // onSearch func like setData 
  ),
};