前端案例—antdDesign的Select多选框组件加上全选功能。

实现效果如下：

Select 组件里有这个属性，可以利用这个对下拉菜单进行自定义。

const handleChange= (e, value) => {setSelectState(e.target.checked)let arr = productOptions?productOptions?.map((item)=>item.value):[]form.setFieldsValue({prodIdentifierList:arr})      
}

<Form.Itemname="prodIdentifierList"label=""style={{ marginBottom: 12 }}noStylerules={[{required: true,message: "产品不可以为空",}]}><Selectmode="multiple"placeholder="请选择产品"options={productOptions}//   tagRender={finishFlag ? tagRender : null}onChange={(value) =>console.log(value)}dropdownRender={(allSelectValue) => (<div><div style={{ padding: "4px 8px 8px 8px", cursor: "pointer" }}><Checkboxchecked={selectState}onChange={handleChange}>全选</Checkbox></div><Divider style={{ margin: "0" }} />{/* Option 标签值 */}{allSelectValue}</div>)}/></Form.Item>