react antd-design Select全選功能實例

更新時間：2024年03月22日 09:43:40 作者：熱愛前端的小君同學

這篇文章主要介紹了react antd-design Select全選功能實例,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

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: '銀聯(lián)二維碼', value: '4' },
  { label: '數(shù)字貨幣', 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 改變狀態(tài)
                      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';
 
//正常而言級聯(lián)選擇還存在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，可以不用此屬性
/>,