Tui

DropSelect 下拉选择

下拉选择列表，通过 v-model 绑定选中值，适用于单选场景

基础用法

通过 v-model 绑定选中值，list 配置选项列表。选项支持 desc 描述信息。

Vue.js

专业版

示例代码

vue

尺寸与禁用

支持 small / medium 两种尺寸；支持整个下拉禁用或单项禁用。

medium（默认）

编辑

查看

编辑

small

编辑

查看

示例代码

vue

弹出位置

通过 placement 控制下拉选项的弹出方向，支持 8 个位置。

bottom-start (默认)

编辑

top-start

编辑

bottom-end

编辑

top-end

编辑

left-center

编辑

right-center

编辑

示例代码

vue

自定义插槽

通过 content 插槽自定义选项渲染内容，通过 arrow 插槽自定义箭头图标。

数据分析

示例代码

vue

属性 Props

v-model

绑定值

string | number | boolean

list

下拉选项数据

Array<DropdownItem>

[]

disabled

是否禁用

boolean

false

nowrap

选项文字是否换行

boolean

false

width

下拉选项宽度

string | number

260

size

下拉框尺寸

'small' | 'medium'

small / medium

medium

placement

下拉选项位置

string

bottom-start / top-start / bottom-end / top-end / left-center / right-center / left-start / right-start / left-end / right-end

bottom-start

事件 Events

change

选择变化时触发

(val: DropdownItem): void

插槽 Slots

arrow

自定义下拉交互图标，替换默认箭头图标

top

自定义下拉列表顶部内容，在选项列表上方显示

content

自定义选项内容，替换默认的label和desc显示

bottom

自定义下拉列表底部内容，在选项列表下方显示

DropdownItem Type

label

选项label

string

value

选项value

string | number | boolean

disabled

是否禁用

boolean

false

desc

选项描述

string

hidden

是否隐藏

boolean

false

[key: string]

支持用户自定义的任意属性

any

基础用法

尺寸与禁用

弹出位置

自定义插槽

属性 Props

事件 Events

插槽 Slots

DropdownItem Type