默认主题
选择框

示例

请选择
You selected:
请选择
基础用法

Select嵌套Option使用,用v-model进行双向数据绑定。支持键盘选择。当数据正在加载中时,可以添加loading属性来标示加载状态

Select传入的valueOption中不存在时,组件会强制将value置为空字符串。你也可以通过添加allowUnmatch属性让它不置空

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
请选择
请选择
禁用状态

Select添加disabled禁用整个选择框选择;给Option添加disabled禁用该项选择

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
请选择
请选择
可清空

指定clearable展示清空按钮

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
请选择
You selected:
多选

指定multiple支持多选

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
请选择
可筛选

指定filterable支持筛选,组件会同时对labelvalue进行筛选,你也可以通过filter属性来自定义筛选函数

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
远程搜索

监听$change:keywords事件,可以在关键词变化时进行远程搜索,此时需要将过滤函数设为() => true让它不要真正去过滤结果。

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
自定义显示内容

Option的子元素可以是任意dom结构,而非仅仅只是字符串。此时如果需要支持filterable,我们应该指定label,以便组件知道筛选的内容,当然你也可以通过filter指定过滤函数。

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
请选择
请选择
分组

OptionGroup嵌套Option可以实现分组功能。我们还可以通过添加card属性来支持卡片式分组功能。OptionGroup支持label扩展点,用来定义复杂的分组标签展示

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
请选择
请选择
请选择
请选择
尺寸

size指定尺寸:large default small mini

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
Day:
输入和选择

同时指定filterableallowUnmatch支持筛选到不存在的条目时,可以返回输入的值,而不是清空输入

目前只支持单选

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
请选择
内联模式

Select添加inline属性,可以展示内联模式,该模式下,组件没有边框,宽度和高度如同内联元素一样由内容撑开

index.vdt
index.js
index.vue (Vue)
index.jsx (React)

属性

Select

属性 说明 类型 默认值
value 当前选择的元素,可用v-model双向绑定 * ""
multiple 是否支持多选 Boolean false
disabled 是否禁用 Boolean false
clearable 是否可清空 Boolean false
filterable 是否支持筛选 Boolean false
filter 当支持筛选时,可以自定义筛选规则 Function (keywords, props) => ...
keywords 如果支持筛选,当前关键词 String undefined
placeholder 占位文案 String "请选择"
size 尺寸 "large" | "default" | "small" | "mini" "default"
fluid 是否宽度100% Boolean false
width 指定宽度,组件自动添加单位px Number | String undefined
allowUnmatch 组件的value不在可选项中时,是否强制置空,该值为true时,不置空;当与filterable一起使用,支持输入不匹配项 Boolean false
container 指定弹出菜单追加的位置,默认:Dialog类型的组件会追加到Dialog中,其他会追加到body中。你可以传入函数返回一个DOM用来作为插入的容器,或者传入字符串用来给querySelector进行查询 Function | String undefined
inline 展示内联模式,该模式下,组件没有边框,宽度和高度如同内联元素一样由内容撑开 Boolean false
loading 数据加载状态 Boolean false

Option

属性 说明 类型 默认值
value 选中的值 * undefined
label 该值有两个作用,1. 当children不存在时,作为展示文案;2. 作为筛选的内容,不存在时,则使用children的文本作为筛选内容 String undefined
disabled 是否禁用该项选择 Boolean false

OptionGroup

属性 说明 类型 默认值
label 分组标签名 String | Number | vNode ""

扩展点

OptionGroup

名称 说明
label 定义复杂的分组标签名