老规矩先看他的功能：

filterDropdown：一个函数，它返回一个 React 组件，该组件包含了一个搜索框和两个按钮（"搜索"和"重置"）。这个函数接受一个对象参数，包含以下属性：

-   `setSelectedKeys`：一个函数，可以用来设置筛选器的选中值。

-   `selectedKeys`：一个数组，包含当前筛选器的选中值。
-   `confirm`：一个函数，可以用来触发筛选器的确认操作。
-   `clearFilters`：一个函数，可以用来清空筛选器的选中值。

filterIcon：一个函数，它返回一个 React 组件，该组件显示筛选器的图标。这个函数接受一个布尔值参数 filtered，指示当前列是否已经被筛选了。
onFilter：一个函数，用来判断当前行是否符合搜索条件。这个函数接受两个参数：搜索关键字和当前行的数据。
onFilterDropdownVisibleChange：一个函数，它会在筛选器的下拉框被打开或关闭时被调用。在这个例子中，它会检查下拉框是否被打开，并在打开时将搜索框的焦点设置为选中状态。

代码开发案例


 filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
 
 //写逻辑
 )

下面开始写应用案例

结合的是我上一个分页table的姓名栏


filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
<div>
    //先写一个Input 
    <Input
        palceholder="搜索姓名",
        value={selectedkeys[0]}
        //用来绑定搜索框的值 
       onchange={(e)=>setSeletedKeys(e.target.value ? [e.target.value] : [])}
       //结合上下文就是看input的Value 改变，change 就会通过setSeletedkeys来更新 selectedkey 的值
    >
    </Input>
     <Button
     type="primary"
     onClick={() => confirm()}
     icon={<SearchOutlined />}
     size="small"
      style={{ width: 90, marginRight: 8 }}
      >
             搜索           
      </Button>   
       <Button    
         onClick={() => clearFilters()}           
         size="small"            
         style={{ width: 90 }}>             
              重置          
        </Button>                    
</div>           
)
//改变一下搜索的样式
 filterIcon: (filtered) => (
                <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />
            ),
            
//写渲染逻辑
    onFilter:(value,record)=>{
    record.userName.toLowerCase().inculdes(value.toLowerase())
    //没什么可写的就是把输入的值和表格的数据 全部小写后比较 正确的返回true 错误的返回false 
    最后把true 的返回到表格。
    }

onFilter 是一个回调函数，用于过滤表格中的数据。

在 Ant Design 表格组件中，当用户在筛选菜单中输入搜索关键字后，会调用 onFilter 函数来过滤表格中的数据。这个函数接受两个参数：

value：表示当前输入的筛选关键字；
record：表示当前表格行的数据对象。

这个函数需要返回一个布尔值，用于指示当前行的数据是否符合筛选条件。通常情况下，这个函数会使用 toLowerCase 方法将输入的筛选关键字和行数据中的某些字段（如用户名、邮箱等）转换成小写字母，然后使用 includes 方法检查当前行数据中是否包含这个关键字。

成品看图：

源代码：



import React, { useEffect, useState } from 'react'
import { Table, Modal, Card, Input, Button } from 'antd';
import { SearchOutlined } from '@ant-design/icons'
import './index.less'
const Tables = () => {
    const [selectedKeys, setSelectedKeys] = useState([]);
    const carSorter = (a, b) => {
        if (a.car == '骑行中' && b.car === '未骑行') {
            return -1
        } else if (a.car == '未骑行' && b.car === '骑行中') {
            return 1
        } else {
            return a.car - b.car
        }
    }
    const columns = [
        { title: "id", dataIndex: "id" },
        {
            title: "用户名",
            dataIndex: "userName",
            // 自定义筛选项
            filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
                <div style={{ padding: 8 }}>
                    <Input
                        placeholder="搜索名字"
                        value={selectedKeys[0]}
                        onChange={(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                        onPressEnter={() => confirm()}
                        style={{ width: 188, marginBottom: 8, display: 'block' }}
                    />
                    <Button
                        type="primary"
                        onClick={() => confirm()}
                        icon={<SearchOutlined />}
                        size="small"
                        style={{ width: 90, marginRight: 8 }}
                    >
                        搜索
                    </Button>
                    <Button
                        onClick={() => clearFilters()}
                        size="small"
                        style={{ width: 90 }}>
                        重置
                    </Button>
                </div>
            ),
            // 筛选项渲染后的逻辑
            filterIcon: (filtered) => (
                <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />
            ),
            onFilter:
                (value, record) => record.userName.toLowerCase().includes(value.toLowerCase()),

        },
        { title: "骑行状态", dataIndex: "car", sorter: carSorter },
        { title: "余额", dataIndex: "curre", sorter: { compare: (a, b) => a.curre - b.curre, } }
    ]



    let dataOr = []
    for (let i = 0; i < 50; i++) {
        dataOr.push(
            { id: i, car: `${i % 2 == 0 ? "骑行中" : "未骑行"}`, curre: `${Math.floor(Math.random() * (1 - 100) + 100)}`, userName: `叶问${i}`, key: i }
        )
    }

    const handleTableChange = (pagination, filters, sorter) => {
        // - 'pagination': 包含当前表格页码和每页显示数量信息的对象。
        // - 'filters': 包含表格筛选信息的对象。
        // - 'sorter': 包含表格排序信息的对象。
        console.log(pagination, filters, sorter);
    };




    const RowSelection = {
        type: 'checkbox',
        // onChange: (selectedKeys, selectedRows) => {
        //     console.log('信息', selectedKeys, selectedRows);
        //     //前一个为选中的数组集合，第二个为选中当前行的对象
        // },
        selectedRowKeys: selectedKeys,
        //selectedRowKeys 属性指定了当前选中的行的 key 值的数组，用于控制表格中的复选框按钮状态。 
        //也就是说，他后边跟的属性比如【1】就是让key=1的 行前面的复选框按钮点亮
        onChange: (selectedRowKeys) => {
            setSelectedKeys(selectedRowKeys);
            //修改数值
            console.log("我变化了", selectedRowKeys);
        },


    }
    const onrow = (record, rowIndex) => {
        return {
            onClick: e => {
                console.log(record, rowIndex);
                setSelectedKeys([...selectedKeys, record.key]);
            }
        }
    }

    return (
        <Card title='分页点击表单' className='card'>
            <Table className='table'
                columns={columns}
                dataSource={dataOr}
                onChange={handleTableChange}
                rowSelection={RowSelection}
                pagination={{
                    pageSize: 5,
                    // showSizeChanger:true,
                }}
                onRow={onrow}
            >
            </Table>
        </Card>);
}
export default Tables;

关于fekterDropdown 函数

成品看图：

源代码：