关于antd:antd3x-Select组件多选框自定义实现全选功能

antd select 组件没有一键全选、全不选性能
利用 dropdownRender 这个 api 自定义下拉框内容
减少全选、全不选 option 项

const selectGroup = (groupIds: number[]) => {this.setState({ groupIds: groupIds});
    this.props.form.setFieldsValue({'department': groupIds});
};
const selectAllGroup = () => {selectGroup(departmentList.map(({ projectGroupId}) => projectGroupId));
};

const deselectAllGroup = () => {selectGroup([]);
};

<FormItem className={styles.nameWrapper} label={formatMessage({ id: 'project.process.department'})}>
    {getFieldDecorator('department', {})(<FormItemWithTooltip title={this.state.departmentTooltip}>
            <Select
                placeholder={formatMessage({ id: 'please.select'})}
                className={styles.templateName}
                getPopupContainer={trigger => trigger.parentNode as HTMLElement}
                allowClear
                mode="multiple"
                maxTagCount={5}
                showArrow
                filterOption={(value, option) =>
                    (option.props.children as string).includes(value)
                }
                dropdownRender={(menuNode, props) => {
                    const allChecked = this.state.groupIds.length === departmentList.length;
                    return (
                        <>
                            <div
                                className={styles.checkAll}
                                onClick={
                                    allChecked
                                        ? deselectAllGroup
                                        : selectAllGroup
                                }
                                onMouseDown={e => {e.preventDefault();
                                    return false;
                                }}
                            >
                                {allChecked ? formatMessage({id: 'upload.list.select.none'}) : formatMessage({id: 'upload.list.select.all'})}
                            </div>
                            {menuNode}
                        </>
                    );
                }}
                onChange={(value: number[]) => {selectGroup(value);
                }}
            >
                {departmentList.map(({ projectGroupId, projectGroupName}) => {
                    return (<Option value={projectGroupId} key={projectGroupId} title={projectGroupName}>
                            {projectGroupName}
                        </Option>
                    );
                })}
            </Select>
        </FormItemWithTooltip>
    )}
</FormItem>