级联选择

简介

级联选择组件是一种允许用户从多个层级中逐步选择选项的组件,每个选择都会影响下一个选择的可用选项,常用于区域、分类等具有层次关系的数据选择场景。

image

配置项

分类

配置

示例

说明

内容

选项列表

image

级联选择组件的数据源,层级最高支持4层。

默认值

image

默认值要求每一层级的值都必须包含,并且要与选项顺序一一对应。

展位内容

image

没有选择任何选项时显示的提示文本。

标签

image

image

详情参见表单通用属性

交互

隐藏

image

控制级联选择组件的默认展示状态,为true 时将隐藏组件。详情参见通用属性

禁用

image

是否禁用级联选择组件

支持清除

image

是否支持清除级联选择的值

显示搜索框

image

是否支持搜索过滤数据源

校验

image

详情参见表单通用属性

样式

外边距

image

详情参见通用属性

形态变体

image

级联选择组件的输入框形态。

选项选中时背景色

image

选项选中时背景颜色。

标签字体大小

image

仅对标签文字内容生效。

属性与方法

名称

类型

示例

说明

value

array

cascader1.value

当前级联选择组件的选中内容

options

array

cascader1.options

只读,当前级联选择组件的数据源

disabled

boolean

cascader1.disabled

是否禁用当前级联选择组件

showSearch

boolean

cascader1.showSearch

是否支持搜索过滤级联选择组件的数据源

allowClear

boolean

cascader1.allowClear

是否支持清除级联选择组件的值

hidden

boolean

cascader1.hidden

当前组件是否隐藏

setValue

func

cascader1.setValue(['option1'])

设置级联选择的选中值为option1

clearValue

func

cascader1.clearValue()

清除级联选择的选中值

setDIsabled

func

cascader1.setDIsabled(true)

设置级联选择的是否禁用,参数为truefalse

clearDIsabled

func

cascader1.clearDIsabled()

清除级联选择的禁用状态

setAllowClear

func

cascader1.setAllowClear(true)

设置级联选择的值是否支持清除,参数为truefalse

clearAllowClear

func

cascader1.clearAllowClear()

清除级联选择的支持清除状态

setShowSearch

func

cascader1.setShowSearch(true)

设置级联选择的值是否支持过滤数据源,参数为truefalse

clearShowSearch

func

cascader1.clearShowSearch()

清除级联选择的支持过滤状态

setHidden

func

cascader1.setHidden(false)

设置级联选择是否隐藏,参数为truefalse

事件回调

配置

说明

image

当级联选择的选中值发生变化时将触发的事件

场景示例

  • 地址场景
    • 在级联选择的数据源中配置各个省份的信息,在收集用户信息/商品下单场景下,可以让用户快速填写地址。

      image