美文网首页
antd Select filterOption

antd Select filterOption

作者: AAA前端 | 来源:发表于2020-10-29 17:54 被阅读0次

    and 里面select组件 如果要用自定义搜索
    filterOption -- 是否根据输入项进行筛选。当其为一个函数时,会接收 inputValue option 两个参数,当 option 符合筛选条件时,应返回 true,反之则返回 false。

          <Select
                    allowClear
                    loading={selectLoading}
                    showSearch
                    mode="multiple"
                    style={{ marginRight: 20, marginLeft: 20, width: 500 }}
                    defaultValue={[]}
                    value={managerIds}
                    onChange={selectChange}
                    filterOption={(input, option) =>{                    
                       option.props.children.indexOf(input) >= 0
                    }}
                >
                    {selectOptions}
          </Select>
    

    其他的略过,只看filterOption 。如果没有这个的话,搜索是筛选的options 的key。添加这个可以搜索value值。
    但是这么写,有部分电脑(测试的电脑)会报错。报indexOf错误 。需要兼容写法。可能部分电脑 初始化的时候children为null 或者undefined.

    <Select
                    allowClear
                    loading={selectLoading}
                    showSearch
                    mode="multiple"
                    style={{ marginRight: 20, marginLeft: 20, width: 500 }}
                    defaultValue={[]}
                    value={managerIds}
                    onChange={selectChange}
                    filterOption={(input, option) =>{                    
                       return option && option.props && option.props.children && option.props.children.indexOf(input) >= 0
                    }}
                >
                    {selectOptions}
                </Select>
    
    

    相关文章

      网友评论

          本文标题:antd Select filterOption

          本文链接:https://www.haomeiwen.com/subject/rrklvktx.html