Vue Virtual Select Component

A high-performance virtual scrolling select component for Vue 2 with Element UI. Supports large datasets (100k+ items) with smooth scrolling.

English | 简体中文

Features

- ✅ Virtual scrolling for large datasets
- ✅ Based on Element UI
- ✅ Smooth performance with 100k+ items
- ✅ Easy to use, drop-in replacement for el-select
- ✅ Customizable item height and visible count

Installation

``bash
npm install vue-virtual-select-component
`

Usage

$3

`javascript
import Vue from 'vue'
import VirtualSelect from 'vue-virtual-select-component'

Vue.use(VirtualSelect)
`

$3

`vue



`

$3

`vue



`

Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| value | String/Number/Array | - | v-model binding value |
| options | Array | [] | Data source for options |
| label-key | String | 'label' | Key name for display field |
| value-key | String | 'value' | Key name for value field |
| item-height | Number | 34 | Height of each item (px) |
| visible-count | Number | 10 | Number of visible items |

Native Element UI Support

This component is a drop-in replacement for el-select. It supports all native Element UI Select props, events, and slots:

$3


- multiple - Multiple selection
- disabled - Disable the select
- clearable - Show clear button
- filterable - Enable filtering (recommend using external search for better performance)
- placeholder - Placeholder text
- size - Component size (medium, small, mini)
- loading - Show loading state
- And all other el-select props via v-bind="$attrs"

$3

- @change - Triggered when value changes
- @visible-change - Triggered when dropdown visibility changes
- @clear - Triggered when clear button is clicked
- @blur - Triggered when input loses focus
- @focus - Triggered when input gets focus
- And all other el-select events via v-on="$listeners"

$3

`vue
v-model="value"
:options="options"
label-key="name"
value-key="id"
multiple
clearable
filterable
placeholder="Select options"
size="small"
@change="handleChange"
@visible-change="handleVisibleChange"
/>
`

Performance Tips

- For datasets > 10k items, use external search filter instead of filterable prop
- Adjust visible-count (10-30) based on your needs
- Use item-height` to match your custom option styles

License

MIT