Antd的table组件自定义筛选菜单的使用

table组件可以对每列设置筛选，也可以自定义筛选项，这里记录一下自己在一次开发中对自定义筛选项的使用

table的自定义筛选，也就是大概如下的效果：

// 自定义筛选无非就是自己放置一个input，可供用户输入
// 再拿取到用户输入的值，进行后续的查询、过滤等操作
// filterDropdown方法，提供setSelectedKeys、selectedKeys来实现input输入框在table组件中的受控
// filterDropdown的更多属性可见这个链接，antd的官网也有该链接：https://github.com/ant-design/ant-design/blob/ecc54dda839619e921c0ace530408871f0281c2a/components/table/interface.tsx#L79
// 如果你想在table外部也获取到input输入的值，可以使用 useRef 来实现
// const searchInput = useRef<any>(null);
{
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    //filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters,close  }) => {
    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => {
        return (
            <div style={
   
   { padding: 8 }}>
                // 表单的受控是通过setSelectedKeys函数与selectedKeys来实现的，会把值透传到table的onChange事件中
                <Input
                    //ref={searchInput}
                    // placeholder={`Search ${dataIndex}`}
                    value={selectedKeys[0]} //input输入框的取值
                    // 当input输入框变化时，调用setSelectedKeys来设置值，实现受控
                    onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                    // onPressEnter={() => handleSearch(selectedKeys as string[], confirm, dataIndex)}
                    style={
   
   { marginBottom: 8, display: 'block' }}
                />
                <Space>
                    <Button
                        type="primary"
                        // onClick={() => handleSearch(selectedKeys as string[], confirm, dataIndex)}
                        // 当调用 confirm 设置closeDropdown为 true时
                        // 会触发table的onChange事件，会在事件中拿到上面input中的值
                        // 可以在onChange 事件中，走网络请求来实现远程的搜索
                        onClick={() => confirm({ closeDropdown: true })}
                        icon={<SearchOutlined />}
                        size="small"
                        style={
   
   { width: 90 }}
                    >
                        远程搜索
                    </Button>
                    <Button
                        onClick={() => clearFilters?.()}
                        size="small"
                        style={
   
   { width: 90 }}
                    >
                        清空
                    </Button>
                    <Button
                        type="link"
                        size="small"
                        onClick={() => {
                            // confirm({ closeDropdown: false });
                            // setSearchText((selectedKeys as string[])[0]);
                            // setSearchedColumn(dataIndex);
                            // 每一关闭筛选项会出发table的onChang事件，会在该事件中拿到上面input输入的值
                            // 本地筛选，配合下面的 onFilter事件来完成
                            // 在onFilter 事件回调中 根据用户输入的筛选条件，过滤掉之后，返回新的值给table
                            confirm({ closeDropdown: true }) 
                        }}
                    >
                        本地筛选
                    </Button>
                    <Button
                        type="link"
                        size="small"
                        onClick={() => {
                             // 注意这里，官网文档会解构出一个close方法用户关闭筛选项
                             // 现在已经已经没有close 方法了 使用如下方法关闭
                            // close(); 
                            confirm({ closeDropdown: true })
                        }}
                    >
                        关闭
                    </Button>
                </Space>
            </div>
        )
    },
    
    // 本地模式下，确定筛选的运行函数 可以在这里进行本地数据的筛选
    onFilter: (value, record) =>
      record[dataIndex]
        .toString()
        .toLowerCase()
        .includes((value as string).toLowerCase()),

    // 自定义 filter 图标
    filterIcon: (filtered: boolean) => (
        <SearchOutlined style={
   
   { color: filtered ? '#1890ff' : undefined }} />
    ),

},