ant design 里面的Select控件在多选模式下支持一键全选/空选吗

Question

如果不支持的话，我怎么在控件里面加个checkbox实现一键全选/空选功能呢，有大神知道的吗

Answer 1

在我之前的回答中说到了怎么通过额外的按钮来控制组件内选中的值的变化，但是额外的按钮如果放在选项框附近可能不太美观，我来提供一个把全选按钮放在下拉列表的解决方案。

参考官方文档 使用 dropdownRender 对下拉菜单进行自由扩展。

参数	说明	类型	默认值	版本
dropdownRender	自定义下拉框内容	(menuNode: ReactNode, props) => ReactNode	-	3.11.0

<Form.Item label="区域">
    {getFieldDecorator('areaID')(
        <Select
            mode="multiple"
            placeholder="请选择区域"
            dropdownRender={menu => (
                <div>
                    {menu}
                    <Divider style={{ margin: '2px 0' }} />
                    <div style={{ padding: '4px 8px 8px 8px', cursor: 'pointer' }}>
                        <Checkbox>全选</Checkbox>
                    </div>
                </div>
            )}
        >
            <Option value="Brazil">巴西</Option>
            <Option value="Korea">韩国</Option>
            <Option value="Japan">日本</Option>
        </Select>
    )}
</Form.Item>

最后实现的效果如下：

Answer 2

自己设置 value 值就可以了，比如搞两按钮，全选的话，将 value 设置成列表数据的值，取消全选将value置空即可

Answer 3

目前Select组件不提供这种属性的配置
可以将Select绑定成受控组件(value绑定到state中)
然后在右侧增加全选/清空的按钮
点击时改变state的值就可以达到目的了。