antd Select filterOption

2020-10-29  本文已影响0人  AAA前端

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>

上一篇下一篇

猜你喜欢

热点阅读