react中使用antdesign组件库的table组件实现自定义筛选菜单

需求如下：

这是一个表格的表头信息，实现这几列的筛选。

涉及到的筛选有：自定义选择项，动态生成选择项，自定义筛选菜单展示

1、依据antdesign官方给出的例子实现的，比如第一列，使用的是：

2、第2，3，6列使用的是同一种筛选方式，与第一列不同的是列配置中关于filters的值的渲染是动态生成的。

3、第4，5列使用的是同一种筛选方式，使用的是自定义的筛选菜单，参考官方示例，进行改写

进入正题，代码怎么实现？？？

第一列的实现就很简单了，只需要在列配置选项中写入相关配置即可，这种方式适用于filters的值是固定筛选的数组的情况。

{
    title: 'x能',
    dataIndex: 'neng',
    key: 'neng',
    align: 'center' as const,
    filters: [
        {
            text: '高',
            value: '1'
        },
        {
            text: '低',
            value: '0'
        }
    ],
    // value指的是你选中的是filters里的哪一个筛选项
    onFilter: (value: string, record: any) => record.neng === Number(value)
}

第2,3,6列是需要动态生成filters的值，这个时候应该是点击筛选icon，弹框展示filter中的选项，问题就是点击icon的事件是不是没有找到？这个时候我想到了一个办法，那就是仿照自定义筛选菜单的写法，实现一个icon,然后在icon上绑定点击事件。

const getColumnFilterRender = (dataIndex: string) => ({
    // dataIndex指的是点击的哪一列
    filters: filterArr || [],
    filterIcon: (
        <FilterFilled onClick={() => handleFilterIcon(dataIndex)} />
    )
});

const handleFilterIcon = (dataIndex: string) => {
    // 对表格数据的当前列进行去重
    const arr = new Set(initialTableData.map((item: any) => item[dataIndex]));
    // filters数组要求的格式[{text: string, value: string}]
    setFilterArr(Array.from(arr).map(item => ({text: item, value: item})));
};

{
    title: '业务xx',
    dataIndex: 'business',
    key: 'business',
    ...getColumnFilterRender('business'),
    onFilter: (value: string, record: any) => record.business === value
}

第4,5列是参考excle表格内的数据筛选，对于数字的筛选有大于某个值，小于某个值，以及大于某个值且小于某个值。实现这样一个自定义筛选功能。

const getColumnSearchProps = (dataIndex: string, filter: any) => ({
    filterDropdown: ({close}: {close: any;}) => (
        <div style={{padding: 8}} onKeyDown={(e) => e.stopPropagation()}>
            <div style={{display: 'flex', marginBottom: '8px'}}>
                <Select
                    showSearch
                    allowClear
                    style={{width: '80px'}}
                    value={filter.condition}
                    onChange={(value) => handleFilterCondition(value, dataIndex)}
                >
                    <Option key={'large'} value={'large'}>
                        大于
                    </Option>
                    <Option key={'small'} value={'small'}>
                        小于
                    </Option>
                    <Option key={'range'} value={'range'}>
                        期间
                    </Option>
                </Select>
                {filter.condition === 'range' ? (
                    <div style={{marginLeft: '10px'}}>
                        大于<Input
                            value={filter.largeNum}
                            style={{width: '60px', margin: '0 10px'}}
                            onChange={(e) => handleLargeNum(e.target.value, dataIndex)}
                        />
                        小于<Input
                            value={filter.smallNum}
                            style={{width: '60px', marginLeft: '10px'}}
                            onChange={(e) => handleSmallNum(e.target.value, dataIndex)}
                        />
                    </div>
                ) : (
                    <Input
                        value={filter.smallNum}
                        style={{width: '60px', marginLeft: '10px'}}
                        onChange={(e) => handleSmallNum(e.target.value, dataIndex)}
                    />
                )}
            </div>
            <Space>
                <Button
                    onClick={() => handleReset(dataIndex)}
                    size="small"
                    style={{color: 'grey'}}
                >
                    重置
                </Button>
                <Button
                    type="primary"
                    onClick={() => handleFilter(close, dataIndex)}
                    size="small"
                >
                    筛选
                </Button>
                <Button
                    type="link"
                    size="small"
                    onClick={() => {
                        close();
                    }}
                >
                    关闭
                </Button>
            </Space>
        </div>
    ),
    filterIcon: () => {
        return (
            <FilterFilled style={{color: filterStates?.[dataIndex] ? '#1890ff' : undefined}} />
        );
    }
});



{
    title: 'CPU使用xxx',
    dataIndex: 'cpuxxx',
    key: 'cpuxxx',
    ...getColumnSearchProps('cpuxxx', cpuFilter)
}


// 分别保存这两列的筛选内的一些相关值
const [cpuFilter, setCpuFilter] = useState({condition: 'large', smallNum: '', largeNum: '', isReset: false});
const [memFilter, setMemFilter] = useState({condition: 'large', smallNum: '', largeNum: '', isReset: false});

// 用来保存所有列的筛选状态
const [filterStates, setFilterStates] = useState<{[dataIndex: string]: boolean;}>({});


/**
 * 根据筛选条件filterCondition获取筛选的结果
 */
const getCondition = (value: number, filter: any) => {
    let result = false;
    switch (filter.condition) {
       case 'range':
           result = value > Number(filter.largeNum) && value < Number(filter.smallNum);
           break;
       case 'large':
           result = value > Number(filter.smallNum);
           break;
       case 'small':
           result = value < Number(filter.smallNum);
           break;
       default:
           result = false;
           break;
    }
    return result;
};
const filterTableData = (cpuFilter: any, memFilter: any) => {
    setLoading(true);
    const newArr = initialTableData.filter((item: any) => {
        return getCondition(item.cpuxxx, cpuFilter) && getCondition(item.memxxx, memFilter);
    });
    setTableData(newArr);
    setLoading(false);
};

// 选择大于，小于，还是期间
const handleFilterCondition = (value: string, dataIndex: string) => {
    if (dataIndex === 'cpuxxx') {
        setCpuFilter({...cpuFilter, condition: value});
    }
    if (dataIndex === 'memxxx') {
        setMemFilter({...memFilter, condition: value});
    }
};

const handleLargeNum = (value: string, dataIndex: string) => {
    if (dataIndex === 'cpuxxx') {
        setCpuFilter({...cpuFilter, largeNum: value});
    }
    if (dataIndex === 'memxxx') {
        setMemFilter({...memFilter, largeNum: value});
    }
};

const handleSmallNum = (value: string, dataIndex: string) => {
    if (dataIndex === 'cpuxxx') {
        setCpuFilter({...cpuFilter, smallNum: value});
    }
    if (dataIndex === 'memxxx') {
        setMemFilter({...memFilter, smallNum: value});
    }
};

// 点击重置
const handleReset = (dataIndex: string) => {
    if (dataIndex === 'cpuxxx') {
        setCpuFilter({condition: 'large', largeNum: '', smallNum: '', isReset: true});
    }
    if (dataIndex === 'memxxx') {
        setMemFilter({condition: 'large', largeNum: '', smallNum: '', isReset: true});
    }
};

// 点击筛选
const handleFilter = (callback: any, dataIndex: string) => {
    callback();
    filterTableData(cpuFilter, memFilter);
    setFilterStates(prevFilterStates => ({
        ...prevFilterStates,
        [dataIndex]: true
    }));
    if (dataIndex === 'cpuxxx') {
        setFilterStates(prevFilterStates => ({
            ...prevFilterStates,
            [dataIndex]: !cpuFilter.isReset
        }));
    }
    if (dataIndex === 'memxxx') {
        setFilterStates(prevFilterStates => ({
            ...prevFilterStates,
            [dataIndex]: !memFilter.isReset
        }));
    }
};

以上就是关于table组件的筛选功能的一些实现，欢迎参考，有问题或者可以优化的点希望大家可以帮忙指正！