默认主题
树形控件

示例

First floor-1
First floor-2
Second floor-2.1
Second floor-2.2
基础用法

通过data属性指定渲染的数据,该属性的格式如下:

  1. label 节点渲染的文案
  2. children 节点的子节点,如果存在会在节点前面渲染展开箭头(空数组也会渲染),否则不会渲染箭头
  3. key 节点的key,在整棵树中唯一。如果你需要操作节点的展开/选中情况,需要添加该属性,否则组件内部会分配一个 唯一的id
  4. disabled 是否禁用节点
  5. loaded 节点的子节点是否已经加载完成,当节点做异步加载时,将不会对该节点调用load方法,详见“异步加载”

你可以通过expandedKeys指定哪些节点展开,当你展开子节点时,需要指定父节点也展开

index.vdt
index.js
index.vue (Vue)
index.jsx (React)


First floor-1
First floor-2
带复选框

添加checkbox属性即可支持但复选框的树形控件;你也可以通过checkedKeys指定哪些节点选中,与expandedKeys不同的是,你无需指定父节点也选中,组件会自动判断父节点的选中和取消选中状态。

通过getCheckedData([onlyLeaf])方法可以获取选中的节点的数据,当onlyLeaftrue时,仅返回选中的叶子节点

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
First floor-1
First floor-2
父子不关联的复选框

给支持复选框的Tree添加uncorrelated属性,可以定义父子不关联的复选框模式,即:父子checkbox选中状态单独控制互不影响,此时你可以指定checkedKeys自由控制checkbox选中状态

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)


First floor-1
First floor-2
Second floor-2.1
Third floor-2.1.1
Third floor-2.1.2
Second floor-2.2
多选

添加multiple属性,可以支持节点多选,通过getCheckedData()方法,可以获取选中的节点数据

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
parent
异步加载

添加load数据加载函数即可实现异步加载子节点功能,组件会传入当前节点对象作为参数,函数可以返回数组或者异步返回数组作为当前异步加载的子节点。如果子节点还可以进一步展开,可以将children属性设为空数组[],否则不指定children则表示该节点为叶子节点。

组件默认遇到children[]空数组的情况就会去进行异步加载,你可以通过loaded属性设为true来标识该子节点已经加载完成,无需再次加载

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
First floor-1
First floor-2
自定义节点内容

通过label扩展点,可以自定义节点的内容。该扩展点会传入两个参数:

  1. data 节点的原始数据
  2. node 节点对象(组件内部会将节点数据映射成节点对象,该对象上有一些属性和方法)

node对象具有如下方法用来操作节点:

  1. append(data) 追加子节点,data可以是单个对象或者对象数组
  2. remove() 移除该节点

组件默认会生成一个root节点对象,你可以通过它往根节点追加子节点

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
First floor-1
First floor-2
Second floor-2.1
Second floor-2.2
右键菜单

绑定rightclick:node并利用DropdownMenu可以实现右键菜单来操作节点增删

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
First floor-1
First floor-2
Second floor-2.1
Third floor-2.1.1
Third floor-2.1.2
Second floor-2.2
过滤

Tree指定filter函数,即可实现节点过滤功能,该函数返回false则表示过滤掉该项。你需要给data的每一项添加全局唯一的key否则过滤时,会因为每次更新key不同而闪动

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
First floor-1
First floor-2
Second floor-2.1
Third floor-2.1.1
Third floor-2.1.2
Second floor-2.2
Second floor-2.3
可拖拽

添加draggable属性,可以实现节点拖拽功能,我们可以通过事件名dragend来监听拖拽完成事件,通过allowDragallowDrop属性可以分别指定哪些节点可以拖拽和插入子节点,组件会在不满足的情况下分别触发denydragdenydrop事件来告知用户

index.vdt
index.js
index.vue (Vue)
index.jsx (React)

属性

属性 说明 类型 默认值
data 要渲染的数据 Object undefined
expandedKeys 通过key指定展开的数据节点 Array undefined
checkedKeys 通过key指定勾选的数据节点 Array undefined
selectedKeys 通过key指定选中的数据节点 Array undefined
multiple selectedKeys是否支持多选 Boolean false
checkbox 是否展示复选框 Boolean false
load 指定异步加载节点数据的函数,该函数通过Promise返回数组来添加子节点数据 Function undefined
filter 指定节点过滤函数,返回true则展示,否则过滤掉 Function undefined
draggable 是否支持拖拽 Boolean false
allowDrag 指定哪些节点可拖拽 Function undefined
allowDrop 指定哪些节点可以插入子节点 Function undefined
uncorrelated 是否让父子checkbox选中状态互不关联 Boolean false

实例属性

属性 说明 类型
root 组件实例的根节点对象实例,通过它可以往根节点追加节点 Node

Node对象

组件内部使用Node对象来维护节点的状态

属性

属性 说明 类型
checked 节点是否已选中 Boolean
indeterminate 节点是否半选中 Boolean
data 节点的原始数据 Object
parent 节点的父节点 Object | undefined
key 节点的key String
children 节点的子节点 Array | undefined
tree 指向Tree组件实例 Tree
loaded 是否已经完成异步加载 Boolean | undefined

方法

方法名 说明 参数 返回值
append 追加子节点 要追加的子节点数据,或子节点数据数组 undefined
remove 删除档期节点 - undefined

扩展点

名称 说明 参数
label 自定义节点渲染内容 data, node

方法

方法名 说明 参数 返回值
getCheckedData 获取勾选的节点数据 onlyLeaf 是否只返回叶子节点 Array
getSelectedData 获取选中的节点数据 - Array
expand 展开节点 key 要展开的节点的key undefined
shrink 收起节点 key 要收起的节点的key undefined
toggleSelect 选中或取消选中节点 key 节点的key undefined

事件

事件名 说明 参数
click:node 点击节点触发 Node, Event
rightclick:node 右键点击节点触发 Node, Event
dragend 拖拽完成触发 {srcNode: '源节点', toNode: '目标节点', mode: '插入模式, -1: 插入节点前面, 1: 插入节点后面, 0: 插入节点内部', tree: '整颗节点树'}
denydrag 拖拽不允许拖拽的节点触发 Node
denydrop 插入到不允许插入的节点时触发 Node