react antd-design Select全选功能实例

import { useEffect, useState, useRef } from 'react'
import { Button, message, Select, Checkbox } from 'antd'
import ProTable from '@ant-design/pro-table';
 
const { Option } = Select;
 
const initialParams = {
  tradeWay: ['1', '2', '3', '4', '5']
}
 
const tradeList = [
  { label: '微信', value: '1' },
  { label: '支付宝', value: '2' },
  { label: '银行卡', value: '3' },
  { label: '银联二维码', value: '4' },
  { label: '数字货币', value: '5' }
]
 
const Index = () => {
  const formRef = useRef()
  const [selectState, setCheckStatus] = useState(true)
  const [selectList, setSelectList] = useState(['1', '2', '3', '4', '5'])
 
  const columns = [
    {
      title: '交易方式',
      dataIndex: 'tradeWay',
      width: 180,
      initialValue: ['1', '2', '3', '4', '5'],
      valueEnum: tradeValue,
      renderFormItem: () => (
        <Select
          mode="multiple"
          onChange={value => {
            setSelectList(value)
            if (formRef.current) {
              formRef.current.setFieldsValue({ tradeWay: value })
            }
          }}
          dropdownRender={allSelectValue => (
            <div>
              <div style={{ padding: '4px 8px 8px 8px', cursor: 'pointer' }}>
                <Checkbox
                  checked={selectState && selectList?.length === tradeList?.length}
                  onChange={e => {
                    if (e.target.checked === true) {
                      setCheckStatus(true) //选中时 给 checked 改变状态
                      setSelectList(['1', '2', '3', '4', '5'])
                      // 当选的时候 把所有列表值赋值给tradeWay
                      if (formRef.current) {
                        formRef.current.setFieldsValue({
                          tradeWay: tradeList?.map(item => item.value)
                        })
                      }
                    } else {
                      setCheckStatus(false)
                      setSelectList([])
                      if (formRef.current) {
                        formRef.current.setFieldsValue({ tradeWay: [] })
                      }
                    }
                  }}
                >
                  全部
                </Checkbox>
              </div>
              {/* Option 标签值 */}
              {allSelectValue}
            </div>
          )}
        >
          {tradeList?.map(item => (
            <Option key={item.value} value={item.value}>
              {item.label}
            </Option>
          ))}
        </Select>
      )
    },
  ]
 
  return (
      <ProTable
        formRef={formRef}
        rowKey="id"
        toolBarRender={null}
        onSubmit={...}
        onReset={...}
        manualRequest
        request={params => {
          ...
        }}
        columns={columns}
      />
  )
}
 
export default Index

import { Cascader } from 'antd';
 
//正常而言级联选择还存在children属性，且值为Array格式
//我们只是想单纯一列下拉多选带勾选框，所以把children属性去掉即可
const options = [
  {
    label: 'test1',
    value: 'test1', 
  },
  {
    label: 'test2',
    value: 'test2',
  },
  {
    label: 'test3',
    value: 'test3',
  },
];
 
const onChange = (value) => {
  console.log(value);
}
//然后直接使用就好了
 
<Cascader
    options={options}
    onChange={onChange}
    multiple
    allowClear
    maxTagCount={1} //表示只需要显示一个Tag，可以不用此属性
/>,