Select V2 虚拟化选择器 ​

面对大量选项时，基础 Select 渲染所有节点会带来性能压力。Select V2 使用虚拟滚动，仅渲染可视区域，轻松承载上万条数据。

ts
import { createApp } from 'vue'
import { SelectV2 as ElSelectV2 } from '@szhn/dh-design-pc'

const app = createApp()
app.use(ElSelectV2)

基础用法 ​

传入 options 数组即可使用，与基础 Select 体验一致。

<template>
  <el-select-v2
    v-model="value"
    :options="options"
    placeholder="请选择"
    style="width: 300px"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { SelectV2 as ElSelectV2 } from '@szhn/dh-design-pc'


const value = ref('')
const options = Array.from({ length: 1000 }, (_, i) => ({
  value: `option-${i + 1}`,
  label: `选项 ${i + 1}`,
}))
</script>

多选 ​

通过 multiple 开启多选模式，选中项以标签形式展示。

<template>
  <el-select-v2
    v-model="value"
    :options="options"
    placeholder="请选择（多选）"
    multiple
    clearable
    style="width: 360px"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { SelectV2 as ElSelectV2 } from '@szhn/dh-design-pc'


const value = ref<string[]>([])
const options = Array.from({ length: 200 }, (_, i) => ({
  value: `option-${i + 1}`,
  label: `选项 ${i + 1}`,
}))
</script>

隐藏多余标签 ​

通过 collapse-tags 将多余标签折叠为文字；配合 collapse-tags-tooltip 可悬停查看。

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; max-width: 360px;">
    <el-select-v2
      v-model="v1"
      :options="options"
      multiple
      collapse-tags
      placeholder="collapse-tags"
      style="width: 100%"
    />
    <el-select-v2
      v-model="v1"
      :options="options"
      multiple
      collapse-tags
      collapse-tags-tooltip
      :max-collapse-tags="2"
      placeholder="带 tooltip"
      style="width: 100%"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { SelectV2 as ElSelectV2 } from '@szhn/dh-design-pc'


const options = Array.from({ length: 50 }, (_, i) => ({
  value: `v-${i}`,
  label: `选项 ${i + 1}`,
}))
const v1 = ref<string[]>(['v-0', 'v-1', 'v-2', 'v-3'])
</script>

可过滤 ​

通过 filterable 启用本地过滤，输入关键字即时检索。

<template>
  <el-select-v2
    v-model="value"
    :options="options"
    filterable
    clearable
    placeholder="输入关键字搜索"
    style="width: 320px"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { SelectV2 as ElSelectV2 } from '@szhn/dh-design-pc'


const value = ref('')
const options = Array.from({ length: 1000 }, (_, i) => ({
  value: `option-${i + 1}`,
  label: `选项 ${i + 1}`,
}))
</script>

选项分组 ​

当 options 中的项包含 options 字段时，即被视为分组数据。

<template>
  <el-select-v2
    v-model="value"
    :options="options"
    placeholder="分组选择"
    style="width: 320px"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { SelectV2 as ElSelectV2 } from '@szhn/dh-design-pc'


const value = ref('')
const options = [
  {
    label: '热门城市',
    options: [
      { value: 'hk', label: '海口' },
      { value: 'sy', label: '三亚' },
    ],
  },
  {
    label: '其它城市',
    options: [
      { value: 'qh', label: '琼海' },
      { value: 'wc', label: '文昌' },
      { value: 'wn', label: '万宁' },
    ],
  },
]
</script>

远程搜索 ​

设置 filterable + remote 并传入 remote-method，即可从远端按需拉取数据。

<template>
  <el-select-v2
    v-model="value"
    :options="options"
    :loading="loading"
    :remote-method="remoteMethod"
    filterable
    remote
    clearable
    placeholder="输入关键字远程搜索"
    style="width: 320px"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { SelectV2 as ElSelectV2 } from '@szhn/dh-design-pc'


const value = ref('')
const loading = ref(false)
const options = ref<{ value: string; label: string }[]>([])

const pool = Array.from({ length: 200 }, (_, i) => `数据 ${i + 1}`)

function remoteMethod(query: string) {
  if (!query) {
    options.value = []
    return
  }
  loading.value = true
  setTimeout(() => {
    options.value = pool
      .filter((x) => x.includes(query))
      .map((x) => ({ value: x, label: x }))
    loading.value = false
  }, 300)
}
</script>

自定义选项模板 ​

通过默认插槽自定义每一条选项的渲染。

<template>
  <el-select-v2
    v-model="value"
    :options="options"
    placeholder="自定义选项"
    style="width: 320px"
  >
    <template #default="{ item }">
      <div style="display: flex; justify-content: space-between; width: 100%;">
        <span>{{ item.label }}</span>
        <span style="color: var(--dh-text-color-secondary, #909399); font-size: 12px;">
          {{ item.desc }}
        </span>
      </div>
    </template>
  </el-select-v2>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { SelectV2 as ElSelectV2 } from '@szhn/dh-design-pc'


const value = ref('')
const options = Array.from({ length: 30 }, (_, i) => ({
  value: `u-${i}`,
  label: `用户 ${i + 1}`,
  desc: `ID: 1000${i}`,
}))
</script>

API ​

Attributes ​

属性说明类型默认值
model-value / v-model绑定值string / number / array 等—
options选项数据array—
multiple是否多选booleanfalse
filterable是否可搜索booleanfalse
remote是否远程搜索booleanfalse
remote-method远程搜索方法Function—
clearable是否可清空booleanfalse
collapse-tags折叠选中标签booleanfalse
collapse-tags-tooltip折叠时悬停展开booleanfalse
max-collapse-tags折叠时展示的标签数number1
allow-create允许创建新选项booleanfalse
height下拉菜单高度number274
item-height每项高度number34
value-key选项对象作为值时的唯一标识stringvalue
propsoptions 字段别名object—

Events ​

事件说明
change选中值改变
visible-change下拉显隐变化
remove-tag移除已选标签
clear清空时触发
blur / focus失焦 / 获焦

完整 API 请参考 Element Plus Select V2。