antd Select组件回显滚动位置不正确;antd Select listItemHeight属性的使用 select滚动位置不正确
antd for React Select组件的常规使用
const [sysList, sysListSet] = React.useState<any[]>([])
<Select value="风控系统" style={{ width: '200px' }}>
{sysList?.map((item: any) => (
<Select.Option value={item.name} key={item.id}>
{item.name}
</Select.Option>
))}
</Select>
出现的问题
- 在有默认值回显的时候；如果默认回显的值位于整个下拉的靠后位置(并非在第一屏可以看到)
- 第一次点开后，第一屏无法看到回显内容需要自己再次滚动才行
- 效果图如下方第二个下拉选择框
先说如何解决
- 给Select组件添加 listItemHeight属性；
- listItemHeight={32}
- 效果图 如果上边 第一个下拉选择框
const [sysList, sysListSet] = React.useState<any[]>([])
<Select
value="风控系统"
style={{ width: '200px' }}
listItemHeight={32}
>
{sysList?.map((item: any) => (
<Select.Option value={item.name} key={item.id}>
{item.name}
</Select.Option>
))}
</Select>
