react antd-design Select全选功能实例
作者:热爱前端的小君同学
这篇文章主要介绍了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: '银联二维码', 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,可以不用此属性 />,
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。