树 ​

显示一组具有层次结构的数据。

基本用法 ​

基本树结构。

可选 ​

用于节点选择。

此示例还演示了如何异步加载节点数据。

WARNING

使用 show-checkbox 时，由于 check-on-click-leaf 默认为 true， 可以通过单击节点来检查最后一个树的子节点。

懒惰模式下的自定义叶子节点 ​

节点的数据只有在点击后才会获取，因此Tree无法预测节点是否为叶子节点。这就是为什么每个节点都会添加一个下拉按钮，如果是叶子节点，点击后下拉按钮就会消失。话虽这么说，你也可以提前告诉Tree该节点是否是叶子节点，避免在叶子节点之前渲染下拉按钮。

多次延迟加载2.6.3 ​

远程延迟加载节点数据时，有时会出现延迟加载失败的情况。此时，您可以调用reject来保持节点状态不变，并允许远程加载继续进行。

禁用复选框 ​

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

在示例中，defaultProps 中声明了“disabled”属性，并且某些节点设置为“disabled:true”。相应的复选框被禁用并且无法单击。

默认展开并默认选中 ​

树节点可以初始展开或检查

使用 default-expanded-keys 和 default-checked-keys 分别设置初始展开和初始检查的节点。请注意，要使它们正常工作，需要 node-key。它的值是数据对象中键的名称，并且该键的值在整个树中应该是唯一的。

Level one 2
Level one 3

检查树节点 ​

此示例演示如何获取和设置选中的节点。它们都可以通过两种方法完成：节点和键。如果您采用关键方法，则需要 node-key。

Level one 1
Level two 1-1
Level three 1-1-1
Level three 1-1-2
Level one 2
Level two 2-1
Level two 2-2
Level one 3
Level two 3-1
Level two 3-2

自定义节点内容 ​

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

自定义树节点模板有两种方法：render-content 和作用域槽。使用 render-content 分配返回树节点内容的渲染函数。渲染函数的详细介绍请参见Vue的文档。如果您更喜欢作用域插槽，则可以访问作用域中的 node 和 data，分别代表当前节点的 TreeNode 对象和节点数据。请注意，render-content 演示无法在 JSFiddle 中运行，因为它不支持 JSX 语法。在实际项目中，如果正确配置了相关依赖，render-content 就可以正常工作。

Using render-content

Level one 1
Level two 1-1
Level three 1-1-1
Level three 1-1-2
Level one 2
Level two 2-1
Level two 2-2
Level one 3
Level two 3-1
Level two 3-2

Using scoped slot

Level one 1
Level two 1-1
Level three 1-1-1
Level three 1-1-2
Level one 2
Level two 2-1
Level two 2-2
Level one 3
Level two 3-1
Level two 3-2

自定义节点类 ​

树节点的类别可以自定义

。使用props.class构建节点的类名。

Level one 1
Level two 1-1
Level three 1-1-1
Level three 1-1-2
Level one 2
Level two 2-1
Level two 2-2
Level one 3
Level two 3-1
Level two 3-2

树节点过滤 ​

树节点可以过滤

调用Tree实例的filter方法来过滤树节点。它的参数是过滤关键字。请注意，要使其正常工作，需要 filter-node-method，其值是过滤方法。

Level one 1
Level two 1-1
Level three 1-1-1
Level three 1-1-2
Level one 2
Level two 2-1
Level two 2-2
Level one 3
Level two 3-1
Level two 3-2

手风琴 ​

同一层级中一次只能扩容一个节点。

可拖动 ​

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

Level one 1
Level two 1-1
Level three 1-1-1
Level one 2
Level two 2-1
Level three 2-1-1
Level two 2-2
Level three 2-2-1
Level one 3
Level two 3-1
Level three 3-1-1
Level two 3-2
Level three 3-2-1

树 API ​

属性 ​

名称描述类型默认
数据树数据数组—
空文本数据无效时显示的文本字符串—
节点键节点的唯一标识键名称，其值在整个树中应该是唯一的字符串—
道具配置选项见下表对象—
扩展后渲染是否仅在父节点第一次展开后才渲染子节点布尔值真实
负载加载子树数据的方法，仅在 lazy 为 true 时有效功能—
渲染内容树节点的渲染函数功能—
当前突出显示当前节点是否高亮布尔值假
默认展开全部是否默认展开所有节点布尔值假
单击展开节点单击节点时是否展开或折叠节点，如果为 false，则仅在单击箭头图标时展开或折叠节点。布尔值真实
单击节点时检查单击节点时是否选中或取消选中节点，如果为 false，则只能通过单击复选框来选中或取消选中该节点。布尔值假
单击叶检查 2.9.6单击叶节点（最后一个子节点）时是否选中或取消选中节点。布尔值真实
自动展开父级子节点展开时是否展开父节点布尔值真实
默认扩展键初始扩展节点的键数组数组—
显示复选框节点是否可选布尔值假
严格检查当show-checkbox为true时，节点的检查状态是否不影响其父节点和子节点布尔值假
默认检查键初始检查节点的键数组数组—
当前节点键初始选择节点的键字符串 / 数字—
过滤节点方法当使用filter方法时，该函数将在每个节点上执行。如果返回false，树节点将被隐藏。功能—
手风琴同一层级中是否一次只能扩容一个节点布尔值假
缩进相邻级别节点的水平缩进（以像素为单位） 数字1818
图标自定义树节点图标组件字符串 / 组件—
懒惰是否延迟加载叶子节点，与load属性一起使用布尔值假
可拖动是否启用树节点拖放布尔值假
允许拖动该函数将在拖动节点之前执行。如果返回false，则节点无法拖动功能—
允许丢弃该函数将在拖动节点被删除之前执行。如果返回false，则拖动的节点无法放到目标节点处。 type 有三个可能的值：'prev'（将拖动节点插入到目标节点之前）、'inner'（将拖动节点插入到目标节点）和'next'（将拖动节点插入到目标节点之后）功能—

道具 ​

属性描述类型默认
标签指定节点对象的哪个键用作节点的标签字符串 / 功能—
儿童指定哪个节点对象用作节点的子树字符串—
已禁用如果节点的复选框被禁用，则指定节点对象代表哪个键字符串 / 功能—
是叶指定节点是否为叶子节点，仅在启用延迟加载时有效字符串 / 功能—
类自定义节点类名字符串 / 功能—

暴露 ​

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

方法描述参数
过滤器过滤所有树节点，过滤后的节点将被隐藏接受一个参数，该参数将用作过滤器节点方法的第一个参数
更新KeyChildren将新数据设置到节点，仅在分配 node-key 时有效(key, data) 接受两个参数： 1. 节点的 key 2. 新数据
获取已检查节点如果节点可以选择（show-checkbox为true），则返回当前选择的节点数组(leafOnly, includeHalfChecked) 接受两个布尔类型参数： 1. 默认值为false。如果参数为true，则仅返回当前选中的子节点数组。 2.默认值为false。如果参数为true，则返回值包含halfchecked节点
设置已检查节点设置要检查的某些节点，仅在分配 node-key 时有效(nodes, leafOnly) 接受两个参数： 1. 要检查的节点对象数组 2. 布尔参数。如果设置为true，则仅设置叶子节点的检查状态。默认值为 false。
获取已检查密钥如果可以选择节点（show-checkbox 是 true），则返回当前选定的节点键数组(leafOnly) 接受布尔类型参数，默认值为false。如果参数为true，则仅返回当前选中的子节点数组。
设置CheckedKeys设置要检查的某些节点，仅在分配 node-key 时有效(keys, leafOnly) 接受两个参数： 1. 要检查的节点键数组 2. 布尔参数。如果设置为true，则仅设置叶子节点的检查状态。默认值为 false。
设置已检查设置节点是否选中，仅在指定 node-key 时有效(key/data, Checked, Deep) 接受三个参数： 1. 要检查的节点的键或数据 2. 指示是否检查的布尔类型参数。 3. 一个布尔类型参数，指示是否深度（注意 check-strictly 必须是 false）。
获取半检查节点如果节点可以被选中（show-checkbox为true），则返回当前选中的一半节点数组—
获取HalfCheckedKeys如果可以选择节点（show-checkbox 是 true），则返回当前半选定的节点键数组—
获取当前密钥返回突出显示节点的键（如果没有突出显示节点，则为 null）—
获取当前节点返回突出显示节点的数据（如果没有突出显示节点，则返回 null）—
设置当前键通过按键设置突出显示的节点，仅在分配 node-key 时有效(key, shouldAutoExpandParent=true) 1. 要突出显示的节点的键。如null，取消当前高亮节点2.是否自动展开父节点
设置当前节点设置突出显示的节点，仅在分配 node-key 时有效(node,shouldAutoExpandParent=true) 1.要高亮显示的节点 2.是否自动展开父节点
获取节点通过数据或键获取节点(data) 节点的数据或键
删除删除节点，仅在分配节点键时有效(data) 要删除的节点的数据或节点
附加将子节点追加到树中的给定节点(data,parentNode) 1. 子节点要追加的数据 2. 父节点的数据、键或节点
插入之前在树中的给定节点之前插入一个节点(data, refNode) 1. 待插入节点的数据 2. 引用节点的数据、键或节点
插入之后在树中的给定节点之后插入一个节点(data, refNode) 1. 待插入节点的数据 2. 引用节点的数据、键或节点

活动 ​

| 名称 | 描述 | 参数 | | -------------- | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | ----------- | | 节点单击 | 单击节点时触发 | 四个参数：点击的节点对应的节点对象、TreeNode的node属性、TreeNode本身、事件对象 | | 节点上下文菜单 | 当右键单击节点时触发 | 四个参数：事件、点击节点对应的节点对象、TreeNode的node属性、TreeNode本身 | | 检查-更改 | 当节点的选定状态改变时触发 | 三个参数：选中状态发生改变的节点对应的节点对象、该节点是否被选中、该节点的子树是否有选中节点 | | 检查 | 单击节点的复选框后触发 | 两个参数：对应选中/未选中节点的节点对象，树选中状态对象，它有四个属性：checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys | | 当前变化 | 当前节点发生变化时触发 | 两个参数：当前节点对应的节点对象，TreeNode | node 属性 | | 节点展开 | 当前节点打开时触发 | 三个参数：打开的节点对应的节点对象、TreeNode的node属性、TreeNode本身 | | 节点崩溃 | 当前节点关闭时触发 | 三个参数：关闭节点对应的节点对象、TreeNode的node属性、TreeNode本身 | | 节点拖动开始 | 拖动开始时触发 | 两个参数：拖动节点对应的节点对象、事件。 | | 节点拖拽输入 | 当拖动节点进入另一个节点时触发 | 三个参数：拖动节点对应的节点对象、进入节点对应的节点对象、事件。 | | 节点拖动离开 | 当拖动节点离开节点时触发 | 三个参数：拖动节点对应的节点对象、离开节点对应的节点对象、事件。 | | 节点拖拽 | 拖动节点时触发（如鼠标悬停事件） | 三个参数：拖动节点对应的节点对象、拖过节点对应的节点对象、事件。 | | 节点拖尾 | 拖动结束时触发 | 四个参数：拖动节点对应的节点对象、拖动结束节点对应的节点对象（可能是undefined）、节点放置类型（之前/之后/内部）、事件。 | | 节点丢弃 | 拖拽节点被放下后触发 | 四个参数：拖动节点对应的节点对象、拖拽节点对应的节点对象、节点拖放类型（之前/之后/内部）、事件。 |

老虎机 ​

名称描述类型
默认树节点的自定义内容对象
空 2.3.4数据为空时自定义内容—

类型声明 ​

显示声明
ts
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 }
}