多项选择用于允许用户选择多个选项。用一个最常见的场景举例,如果你希望让运营同学选择多个标签,那么可以使用多选下拉框
配置选项值和标签值
多选下拉框的配置与下拉菜单非常类似,只需要指定
- 选项值 (values) - 数组,即当用户选中时的值
- 选项标签 (labels) - 数组,当用户选中时展示出来的标签
在上图的例子中,我们使用的选项值为 ["food","food-show", "changsha"]
,而选项标签为 ["美食","吃播", "长沙"]
,这样,当用户点击这个多选框时,展示给用户的是标签,而当用户点击其中一个标签时,选中的值则为对应的值。
🚧选项值和标签值注意,通常选项值和需要是相同长度的数组,如果标签值长度更长,多出来的选项会被忽略
默认选中值
在默认选中值中(defaultValues
)你可以指定一个默认选中的值的数组,这样当用户未做任何选择时,多选框会默认将你指定的默认值选中。
比如,如果你指定 ["food", "food-show"]
,那么在用户未做任何选择时,会选中两个标签“美食”和“吃播”。
允许清空
将允许清空选中时,多选下拉框将会允许用户清除选中的值。
读取选中的值或标签
当用户选择了一些项时,你可以用 selectedValues
来读取对应的选择值,值为数组。同样,你也可以用 selectedLabels
来读取对应选中的标签。
属性列表
属性名 | 释义 |
---|---|
placeholder | 当用户未选取任何项时,展示的提示信息,如“请选择” |
labelText | 展示在框前面用于提示用户的提示文字,比如“视频标签” |
showClear | 是否允许用户清除选中的值 |
defaultValues | 当用户未选择任何项时,选中此默认值中指定的项 |
selectedValues | 用户选中的所有值,数组类型 |
selectedLabels | 用户选中的所有项对应的标签,数组类型 |
values | 为每个可选项配置的值 |
labels | 为每个可选项配置的标签 |