• 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={{  '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

  • 相关阅读:
    POJ2253 Frogger
    搜索专题(复习)
    机器学习资料整理
    51nod 1873 初中的算术
    Canny检测理解和Matlab实现
    Floyd+限制路径步数(快速幂优化)
    bitset优化背包问题
    Educational Codeforces Round 44 (Rated for Div. 2)
    BZOJ 3224 SBT 普通平衡树
    本科课程大数据基础
  • 原文地址:https://www.cnblogs.com/shine1234/p/14831634.html
Copyright © 2020-2023  润新知