antd Select下拉多选中互斥问题
1.星期选择互斥处理。如果选择‘*||‘1,2,3,4,5,6’||‘0,6’’这三个其中的一个后,再选其他的,会将这些替换掉。
const getFromEvent1 = (args) => { const defaultVals = ['*', '1,2,3,4,5', '0,6'] if (args && args.length) { const lastVal = args[args.length - 1] if (defaultVals.includes(lastVal)) { return [lastVal]; } else { return args.filter(val => !defaultVals.includes(val)) } } return args; };
2.星期选择互斥处理。如果选择‘*||‘1,2,3,4,5,6’||‘0,6’’这三个其中的一个后,再无法选中其他的,除非先取消他们,才能再去选择其他。
const getFromEvent2 = args => { if (args.some(val => val === '*')) { return ['*']; } else if (args.some(val => val === '1,2,3,4,5')) { return ['1,2,3,4,5']; } else if (args.some(val => val === '0,6')) { return ['0,6']; } return args; }

代码实现:
<Col span={24}>
<FormItem
{...FormItemLayout}
label="重复"
name="day_of_week"
rules={[{ required: true, message: '请选择重复周期' }]}
getValueFromEvent={e => getValueFromEvent1(e)}
style={{ margin: '0.5rem 0' }}
>
<Select
mode="multiple"
showArrow
allowClear
style={{ width: '100%' }}
onChange={handleChange}
tokenSeparators={[',']}
placeholder={'请选择重复周期'}
dropdownRender={menu => <div key={menu}>{menu}</div>}
>
<Option value={'*'} key={'*'}>
每天
</Option>
<Option value={'1,2,3,4,5'} key={'1,2,3,4,5'}>
工作日
</Option>
<Option value={'0,6'} key={'0,6'}>
周末
</Option>
{children}
</Select>
</FormItem>
</Col>


浙公网安备 33010602011771号