下拉菜单组件

下拉菜单是最常见的组件之一,它允许用户从多个选项中,选择出单个值。用户选择后,你可以读取用户选择的值,在其它地方引用或者传入数据库等。

下拉菜单示意图

配置选项值和标签值

配置下拉菜单非常简单,只需要指定

  1. 选项值 (values) - 数组,即用户可以选择的所有值的列表
  2. 选项标签 (labels) - 数组,即用户可以选择所有的值,对应的展示标签

在上图的例子中,我们使用的选项值为 ["male","female", "unknown"],而选项标签为 ["男生","女生", "不便透露"],这样,当用户点击这个下拉菜单时,展示给用户的是标签,而当用户点击其中一个标签时,选中的值则为对应的值。

默认选中值

在默认选中值中(defaultValue)你可以指定一个默认选中的值,这样当用户未做任何选择时,下拉菜单会默认将你指定的默认值选中。

比如,如果你指定 male,那么在用户未做任何选择时,会选中 male 这个选项

允许清空

将允许清空选中时,多选下拉框将会允许用户清除选中的值。

读取选中的值或标签

当用户选择了一些项时,你可以用 value 来读取对应的选择值。同样,你也可以用 label 来读取对应选中的标签。

属性列表

属性名释义
placeholder当用户未选取任何项时,展示的提示信息,如“请选择”
labelText展示在框前面用于提示用户的提示文字,比如“姓别”
showClear是否允许用户清除选中的值
defaultValue当用户未选择任何项时,选中此默认值中指定的项
value用户选中的值
label用户选中的值对应的标签
values为每个可选项配置的值
labels为每个可选项配置的标签