Antd组件Select中optionFilterProp=“children“问题及解决方案

今天在应用到Select组件时碰到这样一个问题:
select利用onSearch进行模糊查询(后端),后端给过来的内容不含有onsearch的value值然后会不展示,组件自动给进行了一层筛选,看图
在这里插入图片描述
在这里插入图片描述
后台数据:
在这里插入图片描述
后台数据是不止俩条的,组件做了自动筛选,这并不是要的结果,
起初我想着将optionFilterProp="children"属性注释掉,结果出现另一个问题:
在这里插入图片描述
以上即是我碰到的问题,后面去官网找办法发现optionFilterProp还有一个属性“label”,完美的解决了这个问题,根据模糊查询条件id结合内容拼在一块给一个label属性,这样怎么都能不被筛选排除了,看结果:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
数据都展示出来了。

  • 6
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
如果需要在antdSelect组件,对多选模式下所选的选项进行修改大小的操作,可以通过自定义渲染选项的方式来实现。 首先,需要定义一个renderOption函数,用于自定义渲染每个选项。在这个函数,可以通过判断当前选项是否被选,来确定是否要对它进行修改大小的操作。代码如下: ```javascript import { Select } from 'antd'; const { Option } = Select; function handleChange(value) { console.log(`Selected: ${value}`); } function renderOption(option) { const { value, children, selected } = option; const style = selected ? { fontSize: '18px' } : {}; return ( <Option key={value} value={value} style={style}> {children} </Option> ); } <Select mode="multiple" style={{ width: '100%' }} onChange={handleChange} optionLabelProp="label" optionFilterProp="children" optionRender={renderOption} > <Option key="1" value="1" label="Option 1"> Option 1 </Option> <Option key="2" value="2" label="Option 2"> Option 2 </Option> <Option key="3" value="3" label="Option 3"> Option 3 </Option> <Option key="4" value="4" label="Option 4"> Option 4 </Option> <Option key="5" value="5" label="Option 5"> Option 5 </Option> <Option key="6" value="6" label="Option 6"> Option 6 </Option> </Select> ``` 上面的代码,定义了一个renderOption函数,用于对每个选项进行自定义渲染。在这个函数,首先获取到当前选项的value、childrenselected属性,然后根据selected属性判断当前选项是否被选。如果被选,则设置字号为18px,否则不做任何修改。最后,返回一个自定义渲染的Option组件。 在渲染Select组件时,将optionRender属性设置为刚才定义的renderOption函数即可。注意,还需要将optionLabelProp属性设置为"label",optionFilterProp属性设置为"children",这样才能正常显示选项和进行搜索。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值