Tree 树形控件

用清晰的层级结构展示信息。

基础用法

基础的树形结构。

可选

用于节点选择。

警告

当使用 show-checkbox 时，由于 `check-on-click-leaf` 默认为 true，可以通过点击最后的子节点来选中它们。

懒加载模式下的自定义叶子节点

多次懒加载 2.6.3

禁用复选框

节点的复选框可以被设置为禁用。

默认展开和默认选中

树节点可以初始展开或选中

节点勾选

自定义节点内容

树节点的内容可以自定义，因此您可以随心所欲地添加图标或按钮

自定义节点类名

树节点的类可以自定义

树节点过滤

树节点可以被过滤

手风琴

每次只打开一个同级树节点。

可拖拽

通过添加 draggable 属性，您可以拖放树节点。

Tree API

属性

名称	描述	类型	默认值
data	树数据	`object`	—
empty-text	数据为空时显示的文本	`string`	—
节点键	节点的唯一标识键名，其值在整个树中应唯一	`string`	—
props	配置选项，请参见下表	`object`	—
展开后渲染	是否在父节点第一次展开后才渲染其子节点	`boolean`	true
load	加载子树数据的方法，仅在 `lazy` 为 true 时有效	`Function`	—
render-content	树节点的渲染函数	`Function`	—
highlight-current	是否高亮当前节点	`boolean`	false
default-expand-all	是否默认展开所有节点	`boolean`	false
expand-on-click-node	是否在点击节点时展开或折叠节点，如果为 false，则仅在点击箭头图标时展开或折叠节点。	`boolean`	true
check-on-click-node	是否在点击节点时选中或取消选中节点，如果为 false，则只能通过点击复选框来选中或取消选中节点。	`boolean`	false
check-on-click-leaf 2.9.6	是否在点击叶子节点（最后的子节点）时选中或取消选中节点。	`boolean`	true
自动展开父节点	当一个子节点被展开时，是否也展开其父节点	`boolean`	true
default-expanded-keys	初始展开节点的键数组	`object`	—
show-checkbox	节点是否可选	`boolean`	false
check-strictly	当 `show-checkbox` 为 `true` 时，节点的选中状态是否不影响其父节点和子节点	`boolean`	false
default-checked-keys	初始选中节点的键数组	`object`	—
current-node-key	初始选中节点的键	`string` / `number`	—
过滤节点的方法	使用过滤方法时，此函数将在每个节点上执行。如果返回 `false`，树节点将被隐藏。	`Function`	—
accordion	是否每次只打开一个同级树节点	`boolean`	false
indent	相邻层级节点之间的水平缩进（以像素为单位）	`number`	18
icon	自定义树节点图标组件	`string` / `Component`	—
lazy	是否懒加载叶子节点，与 `load` 属性配合使用	`boolean`	false
draggable	是否启用树节点的拖拽功能	`boolean`	false
允许拖拽	此函数将在拖动一个节点之前执行。如果返回 `false`，则该节点不能被拖动	`Function`	—
允许放置	此函数将在拖拽节点被放置之前执行。如果返回 `false`，则拖拽节点不能被放置到目标节点。`type` 有三个可能的值：'prev' (将拖拽节点插入到目标节点之前)、'inner' (将拖拽节点插入到目标节点内部) 和 'next' (将拖拽节点插入到目标节点之后)	`Function`	—

props

属性	描述	类型	默认值
label	指定节点对象的哪个键用作节点的标签	`string` / `Function`	—
children	指定哪个节点对象用作节点的子树	`string`	—
disabled	指定节点对象的哪个键表示节点的复选框是否被禁用	`string` / `Function`	—
是否为叶子节点	指定节点是否为叶子节点，仅在懒加载启用时有效	`string` / `Function`	—
class	自定义节点类名	`string` / `Function`	—

暴露

`Tree` 有以下方法，它返回当前选中的节点数组。

方法	描述	参数
filter	过滤所有树节点，被过滤的节点将被隐藏	接受一个参数，该参数将作为 filter-node-method 的第一个参数
更新子节点	为节点设置新数据，仅在指定了 `node-key` 时有效	(key, data) 接受两个参数：1. 节点的 key 2. 新数据
getCheckedNodes	如果节点可选（`show-checkbox` 为 `true`），则返回当前选中的节点数组	(leafOnly, includeHalfChecked) 接受两个布尔类型的参数：1. 默认值为 `false`。如果参数为 `true`，它只返回当前选中的子节点数组。2. 默认值为 `false`。如果参数为 `true`，返回值将包含半选中的节点
设置已选中的节点	设置某些节点为选中状态，仅在指定了 `node-key` 时有效	(nodes, leafOnly) 接受两个参数：1. 一个要被选中的节点对象数组 2. 一个布尔参数。如果设置为 `true`，将只设置叶子节点的选中状态。默认值为 `false`。
getCheckedKeys	如果节点可选（`show-checkbox` 为 `true`），则返回当前选中的节点键数组	(leafOnly) 接受一个布尔类型的参数，其默认值为 `false`。如果参数为 `true`，它只返回当前选中的子节点数组。
setCheckedKeys	设置某些节点为选中状态，仅在指定了 `node-key` 时有效	(keys, leafOnly) 接受两个参数：1. 一个要被选中的节点 key 数组 2. 一个布尔参数。如果设置为 `true`，将只设置叶子节点的选中状态。默认值为 `false`。
setChecked	设置节点为选中或非选中状态，仅在指定了 `node-key` 时有效	(key/data, checked, deep) 接受三个参数：1. 要选中的节点的 key 或 data 2. 一个布尔类型的参数，表示选中或不选中。3. 一个布尔类型的参数，表示是否深度选择 (注意 `check-strictly` 必须为 `false`)。
getHalfCheckedNodes	如果节点可选（`show-checkbox` 为 `true`），则返回当前半选中的节点数组	—
getHalfCheckedKeys	如果节点可选（`show-checkbox` 为 `true`），则返回当前半选中的节点键数组	—
getCurrentKey	返回高亮节点的 key (如果没有节点被高亮则返回 null)	—
getCurrentNode	返回高亮节点的数据 (如果没有节点被高亮则返回 null)	—
setCurrentKey	通过 key 设置高亮节点，仅在指定了 `node-key` 时有效	(key, shouldAutoExpandParent=true) 1. 要高亮的节点的 key。如果为 `null`，则取消当前高亮的节点 2. 是否自动展开父节点
设置当前节点	设置高亮节点，仅在指定了 `node-key` 时有效	(node, shouldAutoExpandParent=true) 1. 要高亮的节点 2. 是否自动展开父节点
getNode	通过 data 或 key 获取节点	(data) 节点的 data 或 key
移除	移除一个节点，仅在指定了 node-key 时有效	(data) 要删除的节点的 data 或节点本身
append	向树中的给定节点追加一个子节点	(data, parentNode) 1. 要追加的子节点的 data 2. 父节点的 data、key 或节点本身
插入到前面	在树中的给定节点之前插入一个节点	(data, refNode) 1. 要插入的节点的 data 2. 参考节点的 data、key 或节点本身
插入到后面	在树中的给定节点之后插入一个节点	(data, refNode) 1. 要插入的节点的 data 2. 参考节点的 data、key 或节点本身

事件

名称	描述	参数
node-click	当节点被点击时触发	四个参数：对应于被点击节点的节点对象、TreeNode 的 `node` 属性、TreeNode 本身、事件对象
node-contextmenu	当节点被右键点击时触发	四个参数：事件、对应于被点击节点的节点对象、TreeNode 的 `node` 属性、TreeNode 本身
check-change	当节点的选中状态改变时触发	三个参数：对应于其选中状态发生变化的节点对象、节点是否被选中、节点的子树是否包含选中节点
check	点击节点的复选框后触发	两个参数：对应于被选中/取消选中的节点对象，树的选中状态对象，该对象有四个属性：checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys
current-change	当前节点改变时触发	两个参数：对应于当前节点的节点对象、TreeNode 的 `node` 属性
node-expand	当前节点打开时触发	三个参数：对应于被打开的节点对象、TreeNode 的 `node` 属性、TreeNode 本身
node-collapse	当前节点关闭时触发	三个参数：对应于被关闭的节点对象、TreeNode 的 `node` 属性、TreeNode 本身
节点拖拽开始	在拖拽开始时触发	两个参数：对应于被拖拽节点的节点对象、事件。
节点拖拽进入	当拖拽节点进入另一个节点时触发	三个参数：对应于被拖拽节点的节点对象、对应于进入节点的节点对象、事件。
节点拖拽离开	当拖拽节点离开一个节点时触发	三个参数：对应于被拖拽节点的节点对象、对应于离开节点的节点对象、事件。
节点拖拽经过	当拖拽经过一个节点时触发（类似于 mouseover 事件）	三个参数：对应于被拖拽节点的节点对象、对应于拖拽经过节点的节点对象、事件。
节点拖拽结束	在拖拽结束时触发	四个参数：对应于被拖拽节点的节点对象、对应于拖拽结束节点的节点对象（可能为 `undefined`）、节点放置类型（before / after / inner）、事件。
节点放置	在拖拽节点被放置后触发	四个参数：对应于被拖拽节点的节点对象、对应于被放置节点的节点对象、节点放置类型（before / after / inner）、事件。

插槽

名称	描述	类型
default	树节点的自定义内容	`object`
空 2.3.4	当数据为空时的自定义内容	—

类型声明

显示声明

interface RootTreeType {
  root: Ref<Node>
  // ...
}

// UnwrapRef<RootTreeType['root']> => Node
type Node = {
  canFocus: boolean
  checked: boolean
  childNodes: Node[]
  data: TreeNodeData
  expanded: boolean
  id: number
  indeterminate: boolean
  isCurrent: boolean
  isEffectivelyChecked: boolean
  isLeaf?: boolean
  isLeafByUser?: boolean
  level: number
  loaded: boolean
  loading: boolean
  parent: Node | null
  store: TreeStore
  text: string | null
  visible: boolean
}

// TreeNodeData => Tree / TreeOptionProps
// Tree type is your prop type.
// TreeOptionProps is default prop type
interface TreeOptionProps {
  children?: string
  label?: string | ((data: TreeNodeData, node: Node) => string)
  disabled?: string | ((data: TreeNodeData, node: Node) => boolean)
  isLeaf?: string | ((data: TreeNodeData, node: Node) => boolean)
  class?: (
    data: TreeNodeData,
    node: Node
  ) => string | { [key: string]: boolean }
}