• Tree 树形控件
    • 基础用法
    • 可选择
    • 默认展开和默认选中
    • 树节点的选择
    • 自定义节点内容
    • 节点过滤
    • 手风琴模式
    • Attributes
    • options
    • 方法
    • Events
    • 参数说明

    Tree 树形控件

    用清晰的层级结构展示信息，可展开或折叠。

    基础用法

    基础的树形结构展示。

    Tree 树形控件 - 图1

    可选择

    适用于需要选择层级时使用。在下例中，由于在点击时才进行该层数据的获取，导致层级不可预知，如果没有下层数据，则点击后下拉按钮会消失。

    Tree 树形控件 - 图2

    默认展开和默认选中

    可将 Tree 的某些节点设置为默认展开或默认选中

    Tree 树形控件 - 图3

    树节点的选择

    Tree 树形控件 - 图4

    自定义节点内容

    节点的内容支持自定义，可以在节点区添加按钮或图标等内容

    Tree 树形控件 - 图5

    节点过滤

    通过关键字过滤树节点

    Tree 树形控件 - 图6

    手风琴模式

    对于同一级的节点，每次只能展开一个

    Tree 树形控件 - 图7

    Attributes

    参数说明类型可选值默认值
    data展示数据array——
    emptyText内容为空的时候展示的文本String——
    nodeKey每个树节点用来作为唯一标识的属性，整颗树应该是唯一的String——
    options配置选项，具体看下表object——
    load加载子树数据的方法function(node, resolve)——
    renderContent树节点的内容区的渲染 Function(nodeModel, data, store)=>ReactElement——
    highlightCurrent是否高亮当前选中节点，默认值是 false。boolean—false
    currentNodeKey当前选中节点的 key，只写属性string, number——
    defaultExpandAll是否默认展开所有节点boolean—false
    expandOnClickNode是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。boolean—true
    autoExpandParent展开子节点的时候是否自动展开父节点boolean—true
    defaultExpandedKeys默认展开的节点的 key 的数组array——
    isShowCheckbox节点是否可被选择boolean—false
    checkedKeyStrictly在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 falseboolean—false
    defaultCheckedKeys默认勾选的节点的 key 的数组array——
    filterNodeMethod对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏Function(value, data, node)——
    accordion是否每次只打开一个同级树节点展开boolean—false
    indent相邻级节点间的水平缩进，单位为像素number—16

    options

    参数说明类型可选值默认值
    label指定节点标签为节点对象的某个属性值string——
    children指定子树为节点对象的某个属性值string——

    方法

    Tree 拥有如下方法，返回目前被选中的节点数组：

    方法名说明参数
    filter对树节点进行筛选操作接收一个任意类型的参数，该参数会在 filterNodeMethod 中作为第一个参数
    getCheckedNodes若节点可被选择（即 isShowCheckbox 为 true），则返回目前被选中的节点所组成的数组(leafOnly) 接收一个 boolean 类型的参数，若为 true 则仅返回被选中的叶子节点，默认值为 false
    setCheckedNodes设置目前勾选的节点，使用此方法必须设置 nodeKey 属性(nodes) 接收勾选节点数据的数组
    getCheckedKeys若节点可被选择（即 isShowCheckbox 为 true），则返回目前被选中的节点所组成的数组(leafOnly) 接收一个 boolean 类型的参数，若为 true 则仅返回被选中的叶子节点的 keys，默认值为 false
    setCheckedKeys通过 keys 设置目前勾选的节点，使用此方法必须设置 nodeKey 属性(keys, leafOnly) 接收两个参数，1. 勾选节点的 key 的数组 2. boolean 类型的参数，若为 true 则仅设置叶子节点的选中状态，默认值为 false
    setChecked通过 key / data 设置某个节点的勾选状态，使用此方法必须设置 nodeKey 属性(key/data, checked, deep) 接收三个参数，1. 勾选节点的 key 或者 data 2. boolean 类型，节点是否选中 3. boolean 类型，是否设置子节点 ，默认为 false

    Events

    事件名称说明回调参数
    onNodeClicked节点被点击时的回调onNodeClicked(nodeModel.data, node)
    onCheckChange节点选中状态发生变化时的回调onCheckChange(nodeModel.data, checked, indeterminate)
    onCurrentChange当前选中节点变化时触发的事件onCurrentChange(nodeModel.data, node)
    onNodeExpand节点被展开时触发的事件onNodeExpand(nodeModel.data, nodeModel, node)
    onNodeCollapse节点被关闭时触发的事件onNodeCollapse(nodeModel.data, nodeModel, node)

    参数说明

    参数说明
    nodeModeltree node 的 model
    nodeModel.data对应的tree node节点的传入的data节点
    node实际的view层的react element节点