Long list optimization antd select component
npm install antd-virtual-select``shell
npm i antd-virtual-select
`
1. 使用 antd Select dropdownRender 方法自定义原组件下拉列表部分mode={Select.SECRET_COMBOBOX_MODE_DO_NOT_USE}
2. 虚拟滚动渲染，只渲染可视区列表，滚动动态加载其他列表，支持上万条数据渲染
3. 对自定义列表项绑定原 Select 组件的各项方法和回调函数支持
4. 同步使用 antd 组件下拉列表样式
5. 同 antd select api
6. 设置 属性可成为支持大数据渲染的 AutoComplete 组件
> 更多 antd 长列表渲染性能问题讨论可查看 antd 官方 issue 3789
> antd 4.0 Select 组件已支持虚拟列表（ie11+），此组件基于 antd 3.x，可用于 ie9 浏览器
基本使用同 antd Select，只是使用 SuperSelect 代替 Select
`js
import SuperSelect from '@nuo-common/cloudjz-virtual-select';
const Option = SuperSelect.Option;
const Example = () => {
const children = [];
for (let i = 0; i < 100000; i++) {
children.push(
);
}
return (
// mode="multiple"
// onChange={onChange}
// onSearch={onSearch}
// onSelect={onSelect}
// optionHeight={50}
>
{children}
);
};
`
- Support tens of thousands of data scrolling smoothly
- Same as ant api, easy to use
- Simple to implement, can be modified according to needs
- Support for direct use in antd Form
- set an optionHeight props to allow the height of the Option to be dynamically controlled
- Use the antd Select dropdownRender method to customize the drop-down list content, rendering only about dozens of data in the viewport
- Calculate the scrolling distance of the list, re-render when scrolling about the height of the visible area, reduce the number of renderings and improve performance
- Represents methods such as antd Select onChange to implement the same api usage and callback parameter return
> demo
- fix:
1. #28 滚动一定高度后搜索下拉不出来。
- fix:
1. 修复滚动一定高度后搜索，搜索输入情况后数据列表显示空白问题
2. 展开下拉列表默认滚动到当前选中项位置
- fix:
1. 修复添加 dropdownClassName 属性无效问题
- feat:
1. 设置 mode={Select.SECRET_COMBOBOX_MODE_DO_NOT_USE}` 属性可成为支持大数据渲染的 AutoComplete 组件