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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。