多选下拉框

多项选择用于允许用户选择多个选项。用一个最常见的场景举例,如果你希望让运营同学选择多个标签,那么可以使用多选下拉框

多选下拉框示意图

配置选项值和标签值

多选下拉框的配置与下拉菜单非常类似,只需要指定

  1. 选项值 (values) - 数组,即当用户选中时的值
  2. 选项标签 (labels) - 数组,当用户选中时展示出来的标签

在上图的例子中,我们使用的选项值为 ["food","food-show", "changsha"],而选项标签为 ["美食","吃播", "长沙"],这样,当用户点击这个多选框时,展示给用户的是标签,而当用户点击其中一个标签时,选中的值则为对应的值。

🚧
选项值和标签值
注意,通常选项值和需要是相同长度的数组,如果标签值长度更长,多出来的选项会被忽略

默认选中值

在默认选中值中(defaultValues)你可以指定一个默认选中的值的数组,这样当用户未做任何选择时,多选框会默认将你指定的默认值选中。

比如,如果你指定 ["food", "food-show"],那么在用户未做任何选择时,会选中两个标签“美食”和“吃播”。

允许清空

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

读取选中的值或标签

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

属性列表

属性名释义
placeholder当用户未选取任何项时,展示的提示信息,如“请选择”
labelText展示在框前面用于提示用户的提示文字,比如“视频标签”
showClear是否允许用户清除选中的值
defaultValues当用户未选择任何项时,选中此默认值中指定的项
selectedValues用户选中的所有值,数组类型
selectedLabels用户选中的所有项对应的标签,数组类型
values为每个可选项配置的值
labels为每个可选项配置的标签