el-select-v2

Virtualized Select (SelectV2) Component

SelectV2 provides a virtualized select for handling large datasets efficiently.

When to Use

• Large datasets (1000+ options)
• Performance-critical selects
• Virtual scrolling needed
• Multi-select with many options

Basic Usage

<template>
  <el-select-v2 v-model="value" :options="options" placeholder="Select" />
</template>

<script setup>
import { ref } from 'vue'

const value = ref('')
const options = Array.from({ length: 1000 }).map((_, idx) => ({
  value: `value${idx}`,
  label: `Option ${idx}`
}))
</script>

Multiple Selection

<template>
  <el-select-v2
    v-model="value"
    :options="options"
    multiple
    collapse-tags
    collapse-tags-tooltip
  />
</template>

<script setup>
import { ref } from 'vue'

const value = ref([])
const options = Array.from({ length: 1000 }).map((_, idx) => ({
  value: `value${idx}`,
  label: `Option ${idx}`
}))
</script>

Filterable

<template>
  <el-select-v2
    v-model="value"
    :options="options"
    filterable
  />
</template>

Remote Search

<template>
  <el-select-v2
    v-model="value"
    :options="options"
    filterable
    remote
    :remote-method="remoteMethod"
    :loading="loading"
  />
</template>

<script setup>
import { ref } from 'vue'

const value = ref('')
const options = ref([])
const loading = ref(false)

const remoteMethod = async (query) => {
  if (query) {
    loading.value = true
    const res = await fetch(`/api/search?q=${query}`)
    options.value = await res.json()
    loading.value = false
  }
}
</script>

Grouped Options

<template>
  <el-select-v2 v-model="value" :options="groupedOptions" />
</template>

<script setup>
import { ref } from 'vue'

const value = ref('')
const groupedOptions = [
  {
    label: 'Group 1',
    options: [
      { value: '1', label: 'Option 1' },
      { value: '2', label: 'Option 2' }
    ]
  }
]
</script>

API Reference

Attributes

Name	Description	Type	Default
model-value / v-model	Binding value	string | number | boolean | object | array	—
options	Options data	array	—
props	Configuration options	object	—
multiple	Enable multiple	boolean	false
disabled	Disabled	boolean	false
clearable	Clearable	boolean	false
filterable	Filterable	boolean	false
remote	Remote search	boolean	false
remote-method	Remote search method	(query: string) => void	—
loading	Loading state	boolean	false
height	Dropdown height	number	274
item-height	Item height	number	34