Antd-virtual-select NPM

开始

npm i antd-virtual-select

功能特性

使用 antd Select dropdownRender 方法自定义原组件下拉列表部分
虚拟滚动渲染，只渲染可视区列表，滚动动态加载其他列表，支持上万条数据渲染
对自定义列表项绑定原 Select 组件的各项方法和回调函数支持
同步使用 antd 组件下拉列表样式
同 antd select api
设置 mode={Select.SECRET_COMBOBOX_MODE_DO_NOT_USE} 属性可成为支持大数据渲染的 AutoComplete 组件

在线 demo

更多 antd 长列表渲染性能问题讨论可查看 antd 官方 issue 3789
antd 4.0 Select 组件已支持虚拟列表（ie11+），此组件基于 antd 3.x，可用于 ie9 浏览器

使用

基本使用同 antd Select，只是使用 SuperSelect 代替 Select

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(
      <Option value={i + ''} key={i}>
        {i}
      </Option>
    );
  }

  return (
    <SuperSelect
      showSearch
      // mode="multiple"
      // onChange={onChange}
      // onSearch={onSearch}
      // onSelect={onSelect}
      // optionHeight={50}
    >
      {children}
    </SuperSelect>
  );
};

Feature

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

Code

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