Select 选择器

下拉选择组件，支持单选、多选、搜索过滤，内置虚拟滚动。

基础用法

请选择

当前值：

单选，支持清除

vue

<template>
  <div style="width: 220px">
    <ASelect v-model="val" :options="OPTIONS" clearable />
    <p style="margin-top: 8px; font-size: 13px; color: #666">当前值：{{ JSON.stringify(val) }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ASelect } from '@lite-code/aui-vue'

const val = ref<string | undefined>(undefined)

const OPTIONS = [
  { label: '北京', value: 'bj' },
  { label: '上海', value: 'sh' },
  { label: '广州', value: 'gz' },
  { label: '深圳', value: 'sz' },
  { label: '杭州', value: 'hz' },
]
</script>

多选

通过 multiple 开启多选，已选项以 Tag 形式展示。

请选择

当前值：[]

多选模式，点击 Tag 上的 × 可单独移除

vue

<template>
  <div style="width: 280px">
    <ASelect v-model="val" :options="OPTIONS" multiple clearable />
    <p style="margin-top: 8px; font-size: 13px; color: #666">当前值：{{ JSON.stringify(val) }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ASelect } from '@lite-code/aui-vue'

const val = ref<string[]>([])

const OPTIONS = [
  { label: '北京', value: 'bj' },
  { label: '上海', value: 'sh' },
  { label: '广州', value: 'gz' },
  { label: '深圳', value: 'sz' },
  { label: '杭州', value: 'hz' },
  { label: '成都', value: 'cd' },
  { label: '武汉', value: 'wh' },
]
</script>

折叠 Tag

多选时设置 maxTagCount 限制显示的 Tag 数量，超出部分折叠为 +N。

请选择

当前值：[]

多选 + maxTagCount=3，超出部分折叠为 +N

vue

<template>
  <div style="width: 280px">
    <ASelect v-model="val" :options="OPTIONS" multiple :max-tag-count="3" clearable />
    <p style="margin-top: 8px; font-size: 13px; color: #666">当前值：{{ JSON.stringify(val) }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ASelect } from '@lite-code/aui-vue'

const val = ref<string[]>([])

const OPTIONS = [
  { label: '北京', value: 'bj' },
  { label: '上海', value: 'sh' },
  { label: '广州', value: 'gz' },
  { label: '深圳', value: 'sz' },
  { label: '杭州', value: 'hz' },
  { label: '成都', value: 'cd' },
  { label: '武汉', value: 'wh' },
]
</script>

搜索过滤

通过 searchable 开启搜索，适合选项较多的场景。

请选择

当前值：[]

多选 + 搜索，支持关键字过滤选项

vue

<template>
  <div style="width: 280px">
    <ASelect v-model="val" :options="OPTIONS" multiple searchable clearable />
    <p style="margin-top: 8px; font-size: 13px; color: #666">当前值：{{ JSON.stringify(val) }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ASelect } from '@lite-code/aui-vue'

const val = ref<string[]>([])

const OPTIONS = [
  { label: '北京', value: 'bj' },
  { label: '上海', value: 'sh' },
  { label: '广州', value: 'gz' },
  { label: '深圳', value: 'sz' },
  { label: '杭州', value: 'hz' },
  { label: '成都', value: 'cd' },
  { label: '武汉', value: 'wh' },
  { label: '西安', value: 'xa' },
  { label: '南京', value: 'nj' },
  { label: '天津', value: 'tj' },
]
</script>

禁用状态

支持整体禁用和单独禁用某个选项。

请选择

北京

左：含禁用选项；右：整体禁用

vue

<template>
  <div style="display: flex; gap: 16px; align-items: flex-start">
    <ASelect :options="OPTIONS_WITH_DISABLED" style="width: 220px" />
    <ASelect :options="OPTIONS" disabled style="width: 220px" model-value="bj" />
  </div>
</template>

<script setup lang="ts">
import { ASelect } from '@lite-code/aui-vue'

const OPTIONS = [
  { label: '北京', value: 'bj' },
  { label: '上海', value: 'sh' },
  { label: '广州', value: 'gz' },
]

const OPTIONS_WITH_DISABLED = [
  { label: '北京', value: 'bj' },
  { label: '上海（不可选）', value: 'sh', disabled: true },
  { label: '广州', value: 'gz' },
  { label: '深圳（不可选）', value: 'sz', disabled: true },
  { label: '杭州', value: 'hz' },
]
</script>

虚拟滚动

下拉列表默认启用虚拟滚动，仅渲染可视区域内的选项，万级数据不卡顿。

请选择

已选 0 / 10000 项

10000 条数据，支持搜索 + 多选

vue

<template>
  <div style="width: 320px">
    <ASelect v-model="val" :options="OPTIONS" multiple searchable clearable />
    <p style="margin-top: 8px; font-size: 13px; color: #666">
      已选 {{ val.length }} / {{ OPTIONS.length }} 项
    </p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ASelect } from '@lite-code/aui-vue'

const val = ref<number[]>([])

const OPTIONS = Array.from({ length: 10000 }, (_, i) => ({
  label: `选项 ${i + 1}`,
  value: i + 1,
}))
</script>

API

Props

属性	类型	默认值	说明
modelValue	string | number | (string | number)[]	—	受控值（配合 v-model 使用）
options	SelectOption[]	[]	选项列表
multiple	boolean	false	是否多选
placeholder	string	'请选择'	占位文本
disabled	boolean	false	是否禁用
size	'sm' | 'md' | 'lg'	'md'	尺寸
clearable	boolean	false	是否显示清除按钮
searchable	boolean	false	是否开启搜索
maxTagCount	number	10	多选时最多显示的 Tag 数，超出折叠为 +N

Events

事件名	参数	说明
update:modelValue	(value: string | number | (string | number)[])	v-model 双向绑定
change	(value: string | number | (string | number)[])	选中值变化时触发

SelectOption

属性	类型	说明
label	string	显示文本
value	string | number	选项值
disabled	boolean	是否禁用该选项