antui Select 添加全选按钮

zmx

2024 年 08 月 23 日

267 次浏览

暂无评论

3073字数

前端

# 引言

在官网上并没有找到全选的样例，这里做一个简单的总结

# 代码

```typescript
const [org_options_v, setOrgVOptions] = useState<any>([])
setOrgVOptions(...) // 这里给下拉框赋选项
<Form.Item
                      name={`forecast_min_unit_org_v`} // 这个是form中的name
                      rules={[{ required: true, message: '请选择具体项目' }]}
                      style=<ruby>flex<rp> (</rp><rt>1, marginLeft: '8px', marginBottom: 0</rt><rp>) </rp></ruby>
                    >
                      <Select
                        mode="multiple" // 支持多选
                        maxTagCount={1} // 最大显示标签数
                        placeholder="请选择"
                        options={org_options_v} // 选项列表
                        onChange={(value) => { // 修改时判断选中的个数和列表中的总数进行对比，保证实际情况和选中状态一致
                        //  org_options_v 是列表中的数据
                        //  form.getFieldValue(`forecast_min_unit_org_v`) 是列表中选中的的数据

if (
                            org_options_v.length != 
                            form.getFieldValue(`forecast_min_unit_org_v`).length // 数量不相等
                          ) {
                            setCheckBoxStatus((prevStatus) => ({
                              ...prevStatus,
                              [`forecast_min_unit_org_v`]: false  // 给状态赋值false
                            }))
                          } else {
                            setCheckBoxStatus((prevStatus) => ({ // 状态相等时赋值true
                              ...prevStatus,
                              [`forecast_min_unit_org_v`]: true
                            }))
                          }
                        }}
                        dropdownRender={(menu) => ( // 这里比较关键，这是下拉框渲染的部分
                          <>
                            <div
                              style=<ruby>padding<rp> (</rp><rt>'4px 8px',
                                borderBottom: '1px solid #e8e8e8'</rt><rp>) </rp></ruby>
                            >
                              // 添加一个checkbox
                              <Checkbox
                                checked={
                                  checkBoxStatus[`forecast_min_unit_org_v`]
                                } // 选中的状态交给react管理
                                onChange={(e) => {
                                  if (e.target.checked) { // 如果当前选中状态为true
                                    form.setFieldsValue({
                                      [`forecast_min_unit_org_v`]:
                                        org_options_v.map((item) => item.value) // 遍历选项中的所有项，赋值给form中的表单数据
                                    })

setCheckBoxStatus((prevStatus) => ({ // 修改状态为true
                                      ...prevStatus,
                                      [`forecast_min_unit_org_v`]: true
                                    }))
                                  } else {
                                    setCheckBoxStatus((prevStatus) => ({  // 修改状态为false
                                      ...prevStatus,
                                      [`forecast_min_unit_org_v`]: false
                                    }))
                                    form.setFieldsValue({
                                      [`forecast_min_unit_org_v`]: [] // 全不选的时候，删除form中这个下拉中所有值
                                    })
                                  }
                                }}
                              >
                                全选
                              </Checkbox>
                            </div>
                            {menu}
                          </>
                        )}
                      />
                    </Form.Item>
```

[album type="photos"]

![全选](https://www.zunmx.top/usr/uploads/2024/08/2438296968.png)
![选部分](https://www.zunmx.top/usr/uploads/2024/08/121804282.png)
![全不选](https://www.zunmx.top/usr/uploads/2024/08/946104432.png)

[/album] </div>

# 结语

详见文档：https://ant-design.antgroup.com/components/select-cn