antd-filterlist

基于antd的多选组件,支持万级数据项的过滤,为性能而生

Usage no npm install needed!

<script type="module">
  import antdFilterlist from 'https://cdn.skypack.dev/antd-filterlist';
</script>

README

说明

适合大规模(超过1000条)key-value数据项多选,能够提供无卡顿的使用体验。

初衷是解决antd-transfer大于1000条后异常卡顿的问题。

内部通过分页和搜索防抖实现性能优化。

如果使用中有任何问题,欢迎提issue。

安装

npm install antd-filterlist

使用

import FilterList from "antd-filterlist";

// 该组件依赖 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 按需加载antd组件样式,如果样式有问题,请先排除此问题,或导入样式
// import 'antd/dist/antd.css';

const dataSource = Array(1000)
  .fill()
  .map((v, i) => {
    return {
      key: "key" + i,
      value: "value" + i
    };
  }); // 实测10000条以下不卡顿

const comp = 
  <FilterList
    dataSource={dataSource}
    onChange={(keys)=>{console.log(keys)}}/>

在线示例

codesandbox

API

属性 说明 类型 默认值
dataSource 数据源:key-value对象数组 Array []
value 已选项key集合:受控 Array []
defaultValue 默认已选项key集合 Array []
onChange 输入框内容变化时的回调: function(keys) func null
renderItem 渲染列表元素:function(item) func (item) => `${item.value}(${item.key})
filterOption 过滤函数:function(inputValue,currentItem) func (inputValue, item) => ('' + item.value).indexOf(inputValue) !== -1
renderTotal 总量提示文字: function(count) func (total) => 选择了${total}项
pageSize 分页size number 10
scrollHeight 列表滚动区域高度 number 220
placeholder 搜索框占位符 string '输入关键词以添加/删除项目'
maxSearchCount 搜索结果最多显示条数 number 20