跳到主要内容

Tree 树形控件

何时使用

  • 适用于大量、具有层级关系的数据展示场景中,并且利用组件的展开收起和关联选中等交互可以方便地对数据进行操作处理。

组件示例

组件属性

属性说明类型默认值
canDrop

节点是否可被作为目标节点时触发的事件

(info: any) => boolean

-
checkStrictly

复选框完全受控

boolean

false

checkStrictly

定义选中时回填的方式,all:返回所有选中节点、parent:父节点都选中时只返回父节点、child:父节点都选中时只返回子节点

'all' | 'parent' | 'child'

'parent'

checkStrictly

复选框完全受控

boolean

false

checkable

是否显示复选框

boolean

false

checkedKeys

默认选中节点

string[]

['0-0-0']

checkedKeys

默认勾选节点

string[]

["0-0-0"]

dataSource

节点数据

TreeDataSource[]

[
  {
    key: "0-0",
    label: "0-0",
    children: [
      {
        key: "0-0-0",
        label: "0-0-0",
        children: [
          {
            key: "0-0-0-0",
            label: "0-0-0-0",
            children: [
              {
                key: "0-0-0-0-0",
                label: "0-0-0-0-0",
              },
            ],
          },
          {
            key: "0-0-0-1",
            label: "0-0-0-1",
          },
        ],
      },
      {
        key: "0-0-1",
        label: "0-0-1",
        children: [
          {
            key: "0-0-1-0",
            label: "0-0-1-0",
          },
          {
            key: "0-0-1-1",
            label: "0-0-1-1",
          },
        ],
      },
    ],
  },
]
defaultExpandAll

默认展开所有节点

boolean

true

defaultExpandedKeys

默认展开的节点

string[]

['0-0-0']

draggable

是否支持拖拽

boolean

false

editable

是否支持编辑

boolean

false

expandedKeys

展开的节点

string[]

['0-0-0']

isLoadData

是否开启异步加载

boolean

false

loadData

异步加载时触发的事件

(data: TreeDataSource) => Promise<TreeDataSource[]>

-
multiple

是否支持多选

boolean

false

onCheck

勾选或取消勾选复选框时触发的事件

(checkedKeys: string[], extra: any) => void

-
onDragEnd

拖拽结束时触发的事件

(info: any) => void

-
onDragEnter

拖拽节点进入目标时触发的事件

(info: any) => void

-
onDragLeave

拖拽节点离开目标节点时触发的事件

(info: any) => void

-
onDragOver

拖拽节点在目标节点上移动时触发的事件

(info: any) => void

-
onDragStart

开始拖拽节点时触发的事件

(info: any) => void

-
onDrop
拖拽节点放入目标节点内或前后触发的事件

(info: any) => void

-
onEditFinish

编辑节点内容完成时触发的事件

(key: string, label: string, node: TreeDataSource) => void

-
onExpand

展开收起节点时触发的事件

(expandedKeys: string[], extra: any) => void

-
onSelect

选中或取消选中节点时触发的事件

(selectedKeys: string[], extra: any) => void

-
processDataSource

数据预处理函数

(data: any) => TreeDataSource[]

-
selectable

是否支持选中

boolean

true

selectedKeys

默认选中节点

string[]

['0-0-0']

showLine

是否显示节点连线

boolean

true

Copyright © 2024钉钉(中国)信息技术有限公司和/或其关联公司浙ICP备18037475号-4