Tree 树形

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

TIP

下方示例可直接交互，点击「显示代码」查看源码。

基础用法

懒加载叶子节点

API

Attributes

属性名	说明	类型	默认值
treeData	设置tree的内容	array 一	一
treeProps	设置tree的节点和label属性	object	一
node-key	设置tree节点的唯一key	string	—
lazy	设置tree是否懒加载	boolean	false
load	加载子树数据的方法，仅当 lazy 属性为true 时生效	Function	—
show-checkbox	设置tree是否多选	boolean	false
draggable	是否开启拖拽节点功能	boolean	false
defaultExpandAll	是否默认展开所有节点	boolean	false
defaultExpandedKeys	默认展开的节点的 key 的数组	array	一
defaultCheckedKeys	默认勾选的节点的 key 的数组	array	一
iconClass	自定义树节点图标组件	string / Component	一
expandOnClickNode	是否在点击节点的时候展开或者收缩节点。	boolean	false
checkOnClickNode	是否在点击节点的时候选中节点。	boolean	false
filterNodeMethod	设置过滤方法	Function	一
renderContent	树节点的内容区的渲染 Function	Function	一

Events

事件名	说明	类型
node-click	点击树节点响应事件	( data, treeNode, treeVNode) => void
check-change	当复选框被点击的时候触发	( data, checked, childChecked) => void
node-expand	当节点展开的时候触发	( data, node, treeNode) => void
node-collapse	当节点收缩的时候触发	( data, node, treeNode) => void

Exposes

名称	说明	类型
filter	过滤节点	Function
getCheckedNodes	获取勾选的节点	Function
setCheckedNodes	设置勾选的节点	Function
getCheckedKeys	获取勾选的节点的 key 的数组	Function
setCheckedKeys	设置勾选的节点的 key 的数组	Function