VirtualSelectBox 滚动下拉

在大量异步数据中选择需要的数据，支持滚动加载和搜索；
支持单选和多选。

限制条件#

异步 API 支持获取部分数据（分页），query 的格式如下：

{
  // 取 10 条数据
  limit: 10,
  // 从第 20 条数据开始取
  offset: 20
}

{
  // 取 10 条数据
  limit: 10,
  // 从第 20 条数据开始取
  offset: 20
}

表示从第 20 条数据开始取10 条数据。

基本用法#

fetchData 异步数据 API, Promise 返回数据结构没有严格要求，通用模拟结构如下：

const fetchData = () => new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve({
      response: {
        resNames: [xxx],
        paging: {
          totalCount: xxx
        }
      }
    });
    reject({
      error: xxx,
    });
  }, time);
});

const fetchData = () => new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve({
      response: {
        resNames: [xxx],
        paging: {
          totalCount: xxx
        }
      }
    });
    reject({
      error: xxx,
    });
  }, time);
});

item 选中项，允许为空对象 {} 或者 ""

具体使用：

<VirtualSelectBox
  item={item}
  fetchData={getDatas}
/>

<VirtualSelectBox
  item={item}
  fetchData={getDatas}
/>

代码演示#

空数组#

有数据单选#

有数据多选#

API#

参数	类型	默认值	说明
item	object	-	选中资源项
fetchDataRequired	func	-	获取异步数据的函数
onSelect	func	-	选择函数
disabled	bool	false	是否禁用操作
rowHeight	number	30	每项 select 的行高
formatOption	func	-	格式化 onSelect 输出数据
isBtn	bool	true	是否使用 button 格式 UI
placeholder	string	'请选择'	默认展示文案
query	object	{}	查询条件
clear	bool	-	清除
defaultItem		{}

← Notification 通知提醒框 Popovers 气泡卡片 →