Select 选择器

下拉选择器，支持单选、多选、搜索、禁用选项、不同尺寸等。

基础用法

最简单的单选模式，通过 v-model 绑定选中值。

请选择城市

▾

选中值：无

不同尺寸

提供 sm / md / lg 三种尺寸，默认为 md。

北京

▾

北京

▾

北京

▾

可搜索

设置 filterable 属性启用搜索过滤。

输入关键字搜索

▾

可清空

设置 clearable 属性，选中后可一键清空。

上海

×▾

禁用与禁用选项

整体禁用使用 disabled，单条选项禁用在 options 中设置 disabled: true。

部分选项禁用

▾

北京

▾

事件回调

选中值变化时触发 change 事件，接收新值为参数。

切换触发事件

▾

change 事件最近返回值：暂无

自定义选项

options 支持任意 value 类型，可配合业务数据使用。

搜索用户

▾

选中用户 ID：无

远程搜索

设置 remote 和 remoteMethod 属性启用异步搜索，输入关键字后会自动调用远程方法获取选项。

输入城市名远程搜索

▾

多选 + 远程搜索 + 可清空

▾

单选值：无　多选值：无

Props

参数	类型	默认值	说明
`v-model`	`string \| number \| undefined`	`undefined`	选中值（多选时为数组）
`options`	`SelectOption[]`	`[]`	选项数据
`placeholder`	`string`	`'请选择'`	占位文本
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	选择器尺寸
`multiple`	`boolean`	`false`	是否多选
`filterable`	`boolean`	`false`	是否可本地搜索过滤
`clearable`	`boolean`	`false`	是否可清空
`disabled`	`boolean`	`false`	是否禁用
`remote`	`boolean`	`false`	是否启用远程搜索
`remoteMethod`	`(query: string) => Promise<SelectOption[]>`	`—`	远程搜索方法，接收搜索关键字，返回 Promise<SelectOption[]>
`loading`	`boolean`	`false`	是否显示加载状态（外部控制时使用）

Events

事件名	类型	说明
`change`	`(value: string \| number \| undefined \| (string \| number)[]) => void`	选中值变化时触发
`update:modelValue`	`(value: any) => void`	v-model 更新事件
`search`	`(query: string) => void`	搜索关键字变化时触发

SelectOption

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