共计 698 个字符,预计需要花费 2 分钟才能阅读完成。
背景:
1. 在做我的项目的时候,常常应用 antd 中”多选的 select 组件“;
2.antd KPI 文档写的:showSearch 使单选模式可搜寻,意为在单选时,搜寻性能是能够设置的,当 showSearch:false,在多选模式仍有搜寻性能。
3. 导致多选模式输入框会获取焦点光标呈现,并且还可输出内容,因为选项的 value 是值的 code 不是 label,所以输出内容搜寻会找不到相干内容。
<Select
mode={'multiple'}
/>
解决办法:
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;}
2. 针对 antd 4.x 的 select 组件: showSearch:false 居然能够了????????,看来是 antd 文档没有更新。
<Select
mode={'multiple'}
showSearch={false}
/>
结语:
之前为了解决 antd3.x 查了很多材料,的确是 antd3 中 select 组件没有对多选模式下搜寻性能可禁用配置,整理出来此文档心愿对正在苦恼的小伙伴提供帮忙。
正文完
发表至: javascript
2021-01-14