其他分享
首页 > 其他分享> > select 选择框里最多可是多选的情况

select 选择框里最多可是多选的情况

作者:互联网

antd +select

  const validateMessages = {
    required: '必填项',
  };
 // 3个选项的回调
  const handleChange = (value) => {
    let newArr;
    if (value.length > 3) {
      newArr = [].concat(value.slice(0, 2), value.sliace(-1));
      searchForm.setFieldsValue({
        admin: newArr,
      });
    }
  };
// data: ["周易(001008)", "潘聪(006683)", "迟鑫(006038)", "张芸(002058)", "张艺博(013358)", "陈斯伦(010003)", "陆融(001185)",…]
        <Form
            className={styles.searchFormtest} layout="inline"
            form={searchForm}
            validateMessages={validateMessages}
          >           
a
            <Form.Item name={'admin'} label=" 医生:">
              <Select
                mode="multiple"  //可多选
                className={styles.formInput} //选择框的长度
                placeholder={'最多可选3个人'}
                onChange={handleChange} //选中 option,或 input 的 value 变化时,调用此函数
                rules={[{ required: true, message: '最多可选3个指标管理人' }]} 
                            //校验最多只能选3个
              >
                {_.map(data, item =>
                  <Select.Option value={item} label={item}>
                    <span role="img" aria-label={item}>
                      {item}
                    </span>
                  </Select.Option>,
                )}
              </Select>
            </Form.Item>
        </Form>

标签:const,多选,newArr,value,data,item,框里,select
来源: https://blog.csdn.net/weixin_45481456/article/details/118991121