• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

antd的select为多选模式下时,输入框禁用搜索功能,禁止输入内容

互联网 diligentman 4天前 5次浏览

背景:

1.在做项目的时候,经常使用antd中”多选的select组件“;
antd的select为多选模式下时,输入框禁用搜索功能,禁止输入内容
2.antd KPI文档写的:showSearch 使单选模式可搜索,意为在单选时,搜索功能是可以设置的,当showSearch:false,在多选模式仍有搜索功能。
antd的select为多选模式下时,输入框禁用搜索功能,禁止输入内容
3.导致多选模式输入框会获取焦点光标出现,并且还可输入内容,由于选项的value是值的code不是label,所以输入内容搜索会找不到相关内容。

<Select
 mode={'multiple'}
/>

antd的select为多选模式下时,输入框禁用搜索功能,禁止输入内容
antd的select为多选模式下时,输入框禁用搜索功能,禁止输入内容
antd的select为多选模式下时,输入框禁用搜索功能,禁止输入内容

解决方法:

1.针对antd 3.x 的select组件: 进行dom操作,找到该input,添加只读属性

js

// antd 下拉组件 多选模式 不支持禁用输入搜索功能, 通过dom操作禁用输入功能
const auctionTimesCode = document.querySelector('#auctionTimesCode #auctionTimesCode');
auctionTimesCode && auctionTimesCode.setAttribute('readonly', 'true');

css

.ant-select-selection--multiple {
  cursor: pointer;
}

antd的select为多选模式下时,输入框禁用搜索功能,禁止输入内容

2.针对antd 4.x 的select组件: showSearch:false 竟然可以了📣😍,看来是antd文档没有更新。

<Select
 mode={'multiple'}
 showSearch={false}
/>

antd的select为多选模式下时,输入框禁用搜索功能,禁止输入内容

结语:

之前为了解决antd3.x查了很多资料,确实是antd3中select组件没有对多选模式下搜索功能可禁用配置,整理出来此文档希望对正在苦恼的小伙伴提供帮助。


喜欢 (0)