本文用了是React+TypeScript+ant design的实例
通过 ant design select 属性Api 提供的 dropdownRender 完成
ant design select 地址
Select props 两个属性都会用到
属性 | 说明 |
---|---|
dropdownRender | 自定义下拉框内容 |
setFieldsValue | 设置表单的值 |
代码:
import React, {useState} from 'react'
const IndexView = ()=>{
//表单数据
const [form] = Form.useForm();
//单选框状态
const [selectState, setSelectState] = useState(false)
//Option列表数据
const data =[
{id:1,name:"首页"},
{id:2,name:"详情"},
{id:3,name:"账户"},
{id:4,name:"功能"},
]
return (
{/* Form 表单 */}
<Form
form={form}
>
<Item rules={[{ required: true }]} label="功能列表" name="functionIds">
<Select
mode="multiple"
style={{ width: '100%' }}
placeholder="请选择功能列表"
allowClear
dropdownRender={allSelectValue => (
<div>
<div style={{ padding: '4px 8px 8px 8px', cursor: 'pointer' }}>
<Checkbox checked={selectState} onChange={(e) => {
// 判断 是否 选中
if(e.target.checked === true){
setSelectState(true) //选中时 给 checked 改变状态
// 当选的时候 把所有列表值赋值给functionIds
form.setFieldsValue({
functionIds:data?.map((item)=>item.id)//如果选中 给select 赋data里面所有的值
})
}else{
setSelectState(false)
form.setFieldsValue({
functionIds:[]//如果取消全选 这清空select全部选中状态
})
}
}}>全选</Checkbox>
</div>
<Divider style={{margin:'0'}}/>
{/* Option 标签值 */}
{allSelectValue}
</div>
)}
>
{data?.map((item) => (
<Option key={item.id} value={item.id}>
{item.name}
</Option>
))}
</Select>
</Item>
</Form>
)
}
export default IndexView;