Tree 树形控件

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

基础用法

基础的树形结构展示。

region1

region2

显示代码

可选择

适用于需要选择层级时使用。

region1

region2

显示代码

懒加载自定义叶子节点

region

显示代码

默认展开和默认选中

可将 Tree 的某些节点设置为默认展开或默认选中

一级 1

一级 2

二级 2-1

二级 2-2

一级 3

二级 3-1

二级 3-2

显示代码

禁用状态

可将 Tree 的某些节点设置为禁用状态

一级 2

二级 2-1

三级 3-1-1

三级 3-1-2

二级 2-2

三级 3-2-1

三级 3-2-2

显示代码

树节点的选择

一级 1

二级 1-1

三级 1-1-1

三级 1-1-2

一级 2

二级 2-1

二级 2-2

一级 3

二级 3-1

二级 3-2

显示代码

自定义节点内容

节点的内容支持自定义，可以在节点区添加按钮或图标等内容

使用 render-content

一级 1

二级 1-1

三级 1-1-1

三级 1-1-2

一级 2

二级 2-1

二级 2-2

一级 3

二级 3-1

二级 3-2

使用 scoped slot

一级 1

二级 1-1

三级 1-1-1

三级 1-1-2

一级 2

二级 2-1

二级 2-2

一级 3

二级 3-1

二级 3-2

显示代码

节点过滤

通过关键字过滤树节点

一级 1

二级 1-1

三级 1-1-1

三级 1-1-2

一级 2

二级 2-1

二级 2-2

一级 3

二级 3-1

二级 3-2

显示代码

手风琴模式

对于同一级的节点，每次只能展开一个

一级 1

一级 2

一级 3

显示代码

可拖拽节点

通过 draggable 属性可让节点变为可拖拽。

一级 1

二级 1-1

三级 1-1-1

三级 1-1-2

一级 2

二级 2-1

二级 2-2

一级 3

二级 3-1

二级 3-2

三级 3-2-1

三级 3-2-2

三级 3-2-3

显示代码

Attributes

Props

Tree 内部使用了 Node 类型的对象来包装用户传入的数据，用来保存目前节点的状态。 Tree 拥有如下方法：

方法

Events

Scoped Slot