Tree V2 虚拟树测试版
无论数据量多少，都具有极快滚动性能的树形视图
基础用法
基础的树形结构。
可选
用于节点选择。
警告
当使用 show-checkbox 时，由于 `check-on-click-leaf` 默认为 true，可以通过点击最后的子节点来选中它们。
禁用复选框
节点的复选框可以被设置为禁用。
默认展开和默认选中
树节点可以初始展开或选中
自定义节点内容
树节点的内容可以自定义，因此您可以随心所欲地添加图标或按钮
自定义节点类 2.9.0
树节点的类可以自定义
自定义节点图标 2.10.3
您可以为不同的节点状态自定义图标。树节点公开了 expanded 属性和 isLeaf 属性，允许您根据节点的状态动态呈现不同的图标：叶节点、展开的节点或折叠的节点。
树节点筛选 2.9.1
filter-method 方法在 2.9.1 版本之后才能接受第三个参数。树节点可以被筛选
TreeV2 API
TreeV2 属性
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| data | 树数据 | object | — |
| empty-text | 数据为空时显示的文本 | string | — |
| props | 配置选项，请参见下表 | object | — |
| highlight-current | 是否高亮当前节点 | 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 |
| default-expanded-keys | 初始展开节点的键数组 | object | — |
| show-checkbox | 节点是否可选 | boolean | false |
| check-strictly | 当 `show-checkbox` 为 `true` 时，节点的选中状态是否不影响其父节点和子节点 | boolean | false |
| default-checked-keys | 初始选中节点的键数组 | object | — |
| current-node-key | 初始选中节点的键 | string / number | — |
| filter-method | 使用过滤方法时，此函数将在每个节点上执行。如果返回 `false`，树节点将被隐藏。 | Function | — |
| indent | 相邻层级节点之间的水平缩进（以像素为单位） | number | 16 |
| icon | 自定义树节点图标组件 | string / Component | — |
| item-size 2.2.33 | 自定义树节点高度 | number | 26 |
| scrollbar-always-on 2.10.4 | 总是显示滚动条 | boolean | false |
| 高度 | 树的高度 | number | 200 |
props
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| value | 节点的唯一标识键名，其值在整个树中应唯一 | string | id |
| label | 指定节点对象的哪个键用作节点的标签 | string | label |
| children | 指定哪个节点对象用作节点的子树 | string | children |
| disabled | 指定节点对象的哪个键表示节点的复选框是否被禁用 | string | disabled |
| class 2.9.0 | 自定义节点类名 | string / Function | — |
TreeV2 Exposes
`Tree` 有以下方法，它返回当前选中的节点数组。
| 方法 | 描述 | 参数 |
|---|---|---|
| filter | 过滤所有树节点，被过滤的节点将被隐藏 | (query: string) |
| getCheckedNodes | 如果节点可选（`show-checkbox` 为 `true`），则返回当前选中的节点数组 | (leafOnly: boolean) |
| getCheckedKeys | 如果节点可选（`show-checkbox` 为 `true`），则返回当前选中的节点键数组 | (leafOnly: boolean) |
| setCheckedKeys | 设置某些节点被选中 | (keys: TreeKey[]) |
| setChecked | 设置节点是否被选中 | (key: TreeKey, checked: boolean) |
| setExpandedKeys | 设置某些节点被展开 | (keys: TreeKey[]) |
| getHalfCheckedNodes | 如果节点可选（`show-checkbox` 为 `true`），则返回当前半选中的节点数组 | — |
| getHalfCheckedKeys | 如果节点可选（`show-checkbox` 为 `true`），则返回当前半选中的节点键数组 | — |
| getCurrentKey | 返回高亮节点的键（如果没有节点高亮，则为 undefined） | — |
| getCurrentNode | 返回高亮节点的数据（如果没有节点高亮，则为 undefined） | — |
| setCurrentKey | 通过键设置高亮节点 | (key: TreeKey) |
| getNode | 通过键或数据获取节点 | (data: TreeKey | TreeNodeData) |
| expandNode | 展开指定节点 | (node: TreeNode) |
| collapseNode | 折叠指定节点 | (node: TreeNode) |
| setData | 当数据量非常大时，使用响应式数据会导致性能不佳，因此我们提供了一种避免这种情况的方法 | (data: TreeData) |
| scrollTo 2.8.0 | 滚动到给定位置 | (offset: number) |
| scrollToNode 2.8.0 | 使用指定的滚动策略滚动到给定的树键 | (key: TreeKey, strategy?: auto | smart | center | start | end) |
TreeV2 事件
| 名称 | 描述 | 参数 |
|---|---|---|
| node-click | 当节点被点击时触发 | (data: TreeNodeData, node: TreeNode, e: MouseEvent) |
| node-drop 2.8.3 | 拖拽某物并放置到节点上时触发 | (data: TreeNodeData, node: TreeNode, e: DragEvent) |
| node-contextmenu | 当节点被右键点击时触发 | (e: Event, data: TreeNodeData, node: TreeNode) |
| check-change | 当节点的选中状态改变时触发 | (data: TreeNodeData, checked: boolean) |
| check | 点击节点的复选框后触发 | (data: TreeNodeData, info: { checkedKeys: TreeKey[],checkedNodes: TreeData, halfCheckedKeys: TreeKey[], halfCheckedNodes: TreeData,}) |
| current-change | 当前节点改变时触发 | (data: TreeNodeData, node: TreeNode) |
| node-expand | 当前节点打开时触发 | (data: TreeNodeData, node: TreeNode) |
| node-collapse | 当前节点关闭时触发 | (data: TreeNodeData, node: TreeNode) |
TreeV2 插槽
| 名称 | 描述 | 类型 |
|---|---|---|
| default | 树节点的自定义内容 | object |
| empty 2.9.0 | 数据为空时的自定义内容 | — |
类型声明
显示声明
ts
type TreeNodeData = Record<string, any>
type TreeKey = string | number
type TreeData = TreeNodeData[]
interface TreeNode {
key: TreeKey
level: number
parent?: TreeNode
children?: TreeNode[]
data: TreeNodeData
disabled?: boolean
label?: string
isLeaf?: boolean
expanded?: boolean
isEffectivelyChecked?: boolean
}来源
贡献者
