antd下来组件支持多条件检索

直接上代码

import React, { useEffect, useState } from 'react';
import { Select } from 'antd';
import Resource from '@/services/Resource';

const Option = Select.Option;

export default props => {
    const [creatorList, setCreatorList] = useState([]);
    useEffect(() => {
        Resource.fetchCreatorList().then(res => {
            if (res?.XCmdrCode === 0) {
                const data = res?.XCmdrResult;
                setCreatorList(data);
            }
        });
    }, []);
    let value = [];
    if (typeof props.value !== 'number') {
        value = props.value;
    }
    const { mode, onChange, placeholder, disabled = false, displayMinusOne = false, showAll = false, style } = props;
    const handleFilterOption = (input, option) => {
        const { data_item } = option.props;
        return data_item?.nick_name.indexOf(input) >= 0 || data_item?.unique_name.indexOf(input) >= 0;
    };

    return (
        <Select
            mode={mode}
            disabled={disabled}
            placeholder={placeholder || '请选择指派人员'}
            style={style || { width: '100%' }}
            allowClear
            showSearch
            filterOption={(input, option) => handleFilterOption(input, option)}
            value={value}
            onChange={onChange}
        >
            {displayMinusOne ? (
                <Option value="-1" key="-1">
                    未分配
                </Option>
            ) : null}
            {showAll && creatorList[0] && creatorList[0].nick_name !== '全部' && (
                <Option value="" key="0">
                    全部
                </Option>
            )}
            {creatorList.map(item => (
                <Option value={item.id.toString()} key={item.id} data_item={item}>
                    {item.nick_name}
                </Option>
            ))}
        </Select>
    );
};