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>