树型下拉单选框

简介

树型下拉单选框是一种将选项以层级结构展示的下拉选择控件,允许用户在树状结构中进行单选操作。

image

配置项

分类

配置

示例

说明

内容

选项列表

image

数据源

默认值

image

默认选中的值

展开的树节点

image

当前展开的树节点的值。

展位内容

image

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

标签

image

image

详情参见表单通用属性

交互

隐藏

image

控制树型下拉单选框的默认展示状态,为true 时将隐藏组件。详情参见通用属性

搜索

image

开启树型下拉单选框的搜索能力,根据用户输入的内容过滤数据。

禁用

image

是否禁用树型下拉单选框

校验

image

详情参见表单通用属性

样式

外边距

image

详情参见通用属性

自定义树节点的展开/折叠图标

image

image

支持自定义树节点的展开/折叠图标。

如果只设置展开图标,则折叠图标为展开图标逆时针转向90度;只设置折叠图标,则展开图标为折叠图标顺时针转向90度。

清除按钮

image

是否展示清除按钮

形态变体

image

树型下拉单选框的输入框形态。

是否展示线条样式

image

数据源各层级间是否展示线条样式

是否展示选框

image

是否展示选框,仅支持单选

CSS 样式

节点悬浮态背景色

image

鼠标悬浮在节点时的背景色

节点选中态背景色

image

选中节点的背景色

圆角

image

树型下拉单选框圆角,详情参见通用属性

文字颜色

image

文字颜色,对树节点生效

标签字体大小

image

仅对标签文字内容生效

属性与方法

名称

类型

示例

说明

value

string

treeSelect1.value

当前树型下拉单选框组件的选中内容

labelText

string

treeSelect1.labelText

只读,当前树型下拉单选框组件的标签文字内容

disabled

boolean

treeSelect1.disabled

只读,是否禁用当前树型下拉单选框组件

data

array

treeSelect1.data

只读,当前树型下拉单选框组件的下拉菜单数据

treeExpandedKeys

array

treeSelect1.treeExpandedKeys

当前树型下拉单选框组件的下拉菜单树的展开项的key集合

validationStatus

boolean

treeSelect1.validationStatus

当前树型下拉单选框组件的校验状态

validationMessage

string

treeSelect1.validationMessage

当前树型下拉单选框组件的校验信息

hidden

boolean

treeSelect1.hidden

当前组件是否隐藏,详情参见通用属性

setValue

func

treeSelect1.setValue('option1')

设置树型下拉单选框的选中值为option1

clearValue

func

treeSelect1.clearValue()

清除树型下拉单选框的选中值

setTreeExpandedKeys

func

treeSelect1.setTreeExpandedKeys(['option1'])

设置树型下拉单选框的展开项为option1

clearTreeExpandedKeys

func

treeSelect1.clearTreeExpandedKeys()

清除树型下拉单选框的展开项,即折叠菜单

setHidden

func

treeSelect1.setHidden(false)

设置树型下拉单选框是否隐藏,参数为truefalse详情参见通用属性

clearHidden

func

treeSelect1.clearHidden()

清除树型下拉单选框的隐藏状态,详情参见通用属性

validate

func

treeSelect1.validate()

触发树型下拉单选框的校验

clearValidate

func

treeSelect1.clearValidate()

清除树型下拉单选框的校验状态

focus

func

treeSelect1.focus()

使树型下拉单选框获取焦点

blur

func

treeSelect1.blur()

使树型下拉单选框失去焦点

事件回调

配置

说明

image

当树型下拉单选框的选中值发生变化时将触发的事件

image

选中树节点时将触发的事件

image

文本框值变化时将触发的事件

场景示例

  • 商品分类
    • 在后台商品管理页面,可以对商品的分类进行过滤,从而快速找到目标商品

      image