下拉菜单是最常见的组件之一,它允许用户从多个选项中,选择出单个值。用户选择后,你可以读取用户选择的值,在其它地方引用或者传入数据库等。
配置选项值和标签值
配置下拉菜单非常简单,只需要指定
- 选项值 (values) - 数组,即用户可以选择的所有值的列表
- 选项标签 (labels) - 数组,即用户可以选择所有的值,对应的展示标签
在上图的例子中,我们使用的选项值为 ["male","female", "unknown"]
,而选项标签为 ["男生","女生", "不便透露"]
,这样,当用户点击这个下拉菜单时,展示给用户的是标签,而当用户点击其中一个标签时,选中的值则为对应的值。
默认选中值
在默认选中值中(defaultValue
)你可以指定一个默认选中的值,这样当用户未做任何选择时,下拉菜单会默认将你指定的默认值选中。
比如,如果你指定 male
,那么在用户未做任何选择时,会选中 male
这个选项
允许清空
将允许清空选中时,多选下拉框将会允许用户清除选中的值。
读取选中的值或标签
当用户选择了一些项时,你可以用 value
来读取对应的选择值。同样,你也可以用 label
来读取对应选中的标签。
属性列表
属性名 | 释义 |
---|---|
placeholder | 当用户未选取任何项时,展示的提示信息,如“请选择” |
labelText | 展示在框前面用于提示用户的提示文字,比如“姓别” |
showClear | 是否允许用户清除选中的值 |
defaultValue | 当用户未选择任何项时,选中此默认值中指定的项 |
value | 用户选中的值 |
label | 用户选中的值对应的标签 |
values | 为每个可选项配置的值 |
labels | 为每个可选项配置的标签 |