zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    各大代码托管服务器的分析比较
    《构建之法》读后
    【转】简单的程序诠释C++ STL算法系列之十五:swap
    【转】error while loading shared libraries: xxx.so.x" 错误的原因和解决办法
    C++大会感悟
    一次DDOS攻击引起的安全漫谈
    为npm设置代理,解决网络问题
    Rust 中的类型转换
    Rust 智能指针(二)
    软件设计原则
  • 原文地址:https://www.cnblogs.com/shine1234/p/14831634.html
Copyright © 2011-2022 走看看