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>
View Code

 

posted @ 2021-05-31 15:27  Running°つ  阅读(1065)  评论(0编辑  收藏  举报