virtualized-select
Version:
A virtualized select component for Vue2
68 lines (55 loc) • 1.39 kB
Markdown
# VirtualizedSelect
Vue2.x component for virtualized select
使用VxeTable的虚拟列表实现的虚拟下拉框,近似实现Element-Select功能
## Install
```bash
npm install virtualized-select
```
## Update
[更新日志](./CHANGELOG.md)
## Usage
```js
import VirtualizedSelect from 'virtualized-select'
import 'virtualized-select/dist/virtualized-select.css'
Vue.use(VirtualizedSelect)
```
## Example
```vue
<template>
<div>
<virtualized-select
v-model="value"
:options="list"
/>
</div>
</template>
<script>
export default {
data() {
return {
value: '',
list: new Array(10000 * 5).fill().map((_, index) => ({
label: index.toString(),
value: index
})),
// 更推荐如下写法,使用Object.freeze冻结数据,因为大多数情况下,下拉列表并不需要响应式
// 如果需要修改原始数据,可以直接赋值修改
freezeList: Object.freeze(new Array(10000 * 5).fill().map((_, index) => ({
label: index.toString(),
value: index
})))
}
}
}
</script>
```
## Performance
可自行加载 `src/assets` 下的火焰图进行对比
冻结前

冻结后

## TODO
- [ ] size
- [ ] 支持创建不存在的值
- [x] ~~_支持对象做值,类似el-select传入value-key_~~