实现ant design的＜Select＞多选框组件中加上全选功能案例

本文用了是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;