过滤（FilterMultiple）封装组件

效果：

 使用：

import type {ColumnsType, TablePaginationConfig} from 'antd/lib/table';

// ，01：时间，02：数值-整数，03：数值-小数，04：枚举，05：文本
const LABEL_TYPE: Record<string, string> = {
    '01': '时间',
    '02': '数值-整数',
    '03': '数值-小数',
    '04': '枚举',
    '05': '文本'
};

...

const columns: ColumnsType<any> = [

        ...

        {
            title: '数据类型',
            dataIndex: 'labelTypeList',
            width: '14%',
            filterMultiple: true,
            filters: Object.entries(LABEL_TYPE).map(([key, value]) => ({text: value, value: key})),
            filterIcon: <IconFilter style={{paddingTop: '2px'}} />,
            filterDropdown: (x: any) => {
                return (
                    <FilterMultiple
                        dataIndex="labelTypeList"
                        optionList={LABEL_TYPE}
                        {...x}
                        filterChange={filterMultipleChange}
                    />
                );
            },
            filteredValue: filterInfo?.labelTypeList ?? null,
            render(text: any, record: any) {
                return LABEL_TYPE[record.labelType] || '-';
            }
        },

        ...
]

封装：

 inidex.tsx

import React, {useState} from 'react';
import {Checkbox, Button, Row} from 'antd';
import {cloneDeep} from 'lodash';
import './index.less';

interface Props {
    dataIndex: string;
    optionList: any;
}

const FilterMultiple: React.FC<Props> = ({dataIndex, optionList, filterChange, ...other}) => {
    const {confirm} = other;
    const [selKeys, setSelKeys] = useState();
    // 确定
    const handleSearch = () => {
        confirm();
        // 回传选中项
        filterChange(dataIndex, cloneDeep(selKeys));
    };
    return (
        <div className="filter-multiple-wrapper">
            <Checkbox.Group style={{width: '100%'}} onChange={(values) => setSelKeys(values)}>
                {Object.keys(optionList).map((i) => (
                    <Row key={i}>
                        <Checkbox className="checkbox" value={i}>
                            {optionList[i]}
                        </Checkbox>
                    </Row>
                ))}
            </Checkbox.Group>
            <div>
                <Button type="primary" size="small" className="btn-confirm" onClick={() => handleSearch()}>
                    确定
                </Button>
                <Button size="small" className="btn-cancel" onClick={() => confirm()}>
                    取消
                </Button>
            </div>
        </div>
    );
};
export default FilterMultiple;

inidex.css

.filter-multiple-wrapper {
    padding: 5px 13px;

    .checkbox {
        width: 100%;
        padding: 5px 0;
        cursor: pointer;
    }

    .btn-confirm {
        width: 65px;
        height: 30px;
        margin: 5px 16px 10px 0;
    }

    .btn-cancel {
        width: 65px;
        height: 30px;
    }
}