antd select全选
时间: 2023-11-14 15:06:59 浏览: 93
antd多选下拉框一行展示的实现方式
5星 · 资源好评率100%
您可以使用 antd 的 Select 组件的 `mode` 属性来实现全选功能。将 `mode` 属性设置为 `'multiple'`,同时给 Select 组件的 options 属性传入一个包含所有选项的数组,再给 Select 组件的 value 属性传入一个包含所有选项的值的数组即可。
示例代码如下:
```
import React, { useState } from 'react';
import { Select } from 'antd';
const { Option } = Select;
const options = ['option1', 'option2', 'option3', 'option4', 'option5'];
function handleSelectAll() {
return options;
}
function App() {
const [value, setValue] = useState([]);
function handleChange(selectedValue) {
if (selectedValue.includes('selectAll')) {
setValue(handleSelectAll());
} else {
setValue(selectedValue);
}
}
return (
<Select
mode="multiple"
placeholder="Please select"
value={value}
onChange={handleChange}
>
<Option key="selectAll">Select All</Option>
{options.map((option) => (
<Option key={option}>{option}</Option>
))}
</Select>
);
}
export default App;
```
注意:需要在 options 数组中加入一个 "Select All" 的选项,并且这个选项的 key 值需要设置为 "selectAll"。
阅读全文