antd3.x Select组件多选框自定义实现全选功能

Posted 2021-09-14 pitaojin

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>