Select组件的dropdownRender属性，可以扩展下拉菜单。
我们只需要在这个属性中编辑代码，将操作区域用Divider组件与选项分离开即可。
这里我用的是formik.js管理表单状态的，不是本文重点。
逻辑代码：
import {
useFormikContext } from 'formik';
const {
setFieldValue } = useFormikContext();
UI部分：
<Select
style={
{
width: 300 }}
placeholder="custom dropdown render"
dropdownRender={
menu => (
<>
{
menu}
<Divider style={
{
margin: '2px 0' }} />
<div style={
{
padding: '2px 8px' }} onMouseDown={
(e) => e.preventDefault()}>
<Button
type="link"
onClick={
() => {
// 全选逻辑，设置该项表单的值
setFieldValue(
'cardTypeList',
options.map((item) => item.value)
);
}}
style={
{
marginRight: '10px' }}
>
全选
</Button>
<Button
type="link"
onClick={
() => {
setFieldValue('cardTypeList', void 0);
}}
>
全不选
</Button>
</div>
</>
)}
>
{
items.map(item => (
<Option key={
item}>{
item}</Option>
))}
</Select>
补充知识
Select基本用法：
import {
Select } from 'antd';
import React from 'react';
const {
Option } = Select;
const children: React.ReactNode[] = [];
for (let i = 10; i < 36; i++) {
children.push(<Option key={
i.toString(36) + i}>{
i.toString(36) + i}</Option>);
}
const handleChange = (value: string[]) => {
console.log(`selected ${
value}`);
};
const App: React.FC = () => (
<>
<Select
mode="multiple"
allowClear
style={
{
width: '100%' }}
placeholder="Please select"
defaultValue={
['a10', 'c12']}
onChange={
handleChange}
>
{
children}
</Select>
<br />
<Select
mode="multiple"
disabled
style={
{
width: '100%' }}
placeholder="Please select"
defaultValue={
['a10', 'c12']}
onChange={
handleChange}
>
{
children}
</Select>
</>
);
- 这里涉及到的Select的属性（全部属性，请到antd官网查看）：
| 属性名 | 说明 |
|---|---|
| mode | 多选或单选，默认单选，设置为 multiple 时是多选 |
| – | – |
| dropdownRender | 自定义下拉框内容，返回 reactNode 节点元素 |
- Select的常用事件及用法请看这篇：http://t.csdn.cn/e8EVR