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

npm install vue-virtual-select-component

Usage

Global Registration

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

Vue.use(VirtualSelect)

Local Registration

<template>
  <div>
    <virtual-select
      v-model="selectedValue"
      :options="largeDataList"
      label-key="name"
      value-key="id"
      placeholder="Select an option"
      clearable
      filterable
    />
  </div>
</template>

<script>
import VirtualSelect from 'vue-virtual-select-component'

export default {
  components: { VirtualSelect },
  data() {
    return {
      selectedValue: '',
      largeDataList: [
        { id: '1', name: 'Option 1' },
        { id: '2', name: 'Option 2' },
        // ... 100k items
      ]
    }
  }
}
</script>

With Search Filter

<template>
  <div>
    <el-input v-model="searchText" placeholder="Search" clearable />
    <virtual-select
      v-model="selectedValue"
      :options="filteredList"
      label-key="name"
      value-key="id"
      :visible-count="20"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '',
      searchText: '',
      dataList: [] // your large dataset
    }
  },
  computed: {
    filteredList() {
      if (!this.searchText) return this.dataList
      return this.dataList.filter(item => 
        item.name.toLowerCase().includes(this.searchText.toLowerCase())
      )
    }
  }
}
</script>

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:

Supported Props

• 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"

Supported Events

• @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"

Example with Native Props

<virtual-select
  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