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

Events

Slots

Exposes

Best Practices

1. Use for datasets with 1000+ options
2. Use height and item-height for performance tuning
3. Use remote for server-side filtering