UI组件库

# Select下拉框

基础用法

显示代码

禁用状态

显示代码

有禁用选项

需在select绑定值中手动设置disable=true
显示代码

可清空单选

包含清空按钮，可将选择器清空为初始状态
显示代码

基础多选

显示代码

自定义模板

可以自定义备选项
显示代码

分组

备选项进行分组展示
显示代码

可搜索

可以利用搜索功能快速查找选项
显示代码

远程搜索

从服务器搜索数据，输入关键字进行查找
显示代码

创建条目

可以创建并选中选项中不存在的条目
显示代码

# Select Attributes

参数 说明 类型 可选值 默认值
value / v-model 绑定值 number/string/boolean — —
multiple 是否多选 boolean — false
disabled 是否禁用 boolean — false
clearable 是否可以清空选项 boolean — false
size 输入框尺寸 string medium/small/mini —
collapse-tags 多选时是否将选中值按文字的形式展示 boolean — false
multiple-limit 多选时用户最多可以选择的项目数，为 0 则不限制 number — 0
name select input 的 name 属性 string — —
placeholder 占位符 string — 请选择
filterable 是否可搜索 boolean — false
allow-create 是否允许用户创建新条目，需配合 filterable boolean — false
filter-method 自定义搜索方法 function — —
remote 是否为远程搜索 boolean — false
remote-method 远程搜索方法 function — —
loading 是否正在从远程获取数据 boolean — false
loading-text 远程加载时显示的文字 string — 加载中
no-match-text 搜索条件无匹配时显示的文字 string — 无匹配数据
no-data-text 选项为空时显示的文字 string — 无数据
popper-class Select 下拉框的类名 string —
reserve-keyword 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 boolean — false
default-first-option 在输入框按下回车，选择第一个匹配项。需配合 filterable 或 remote 使用 boolean — false
popper-append-to-body 是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false boolean
— true

# Select Events

事件名称 说明 回调参数
change 选中值发生变化时触发 目前的选中值
visible-change 下拉框出现/隐藏时触发 出现则为 true，隐藏则为 false
remove-tag 多选模式下移除tag时触发 移除的tag值
clear 可清空的单选模式下用户点击清空按钮时触发 —
blur 当 input 失去焦点时触发 (event: Event)
focus 当 input 获得焦点时触发 (event: Event)

# Select Slots

name 说明
prefix Select组件头部内容
empty 无选项时的列表

# Option Group Attributes

参数 说明 类型 可选值 默认值
label 分组的组名 string — —
disabled 是否将该分组下所有选项置为禁用 boolean — false

# Option Attributes

参数 说明 类型 可选值 默认值
value 选项的值 string/number/object — —
label 选项的标签，若不设置则默认与 value 相同 string/number — —
disabled 是否禁用该选项 boolean — false

# Select Methods

方法名 说明 参数
focus 使 input 获取焦点 —
blur 使 input 失去焦点 —

← Cascader 级联选择器 →