@ones-design/tree

import { Alert, Tag } from '@ones-design/core' import { Meta, Story, Canvas, Controls, ArgsTable, Unstyled } from '@storybook/blocks'

import * as stories from './tree.stories'

Tree 树

import { Tree } from '@ones-design/tree'

在 ONES Design 中，树组件是独立维护的。在使用它之前，你需要先安装 @ones-design/tree 组件包：

npm install @ones-design/tree

Tree

Props

Examples

固定根节点

affixRootNode 已被废弃，你不再需要额外的配置来实现固定根节点的功能，可以参考下面的 Demo。

具体可以阅读 affixRootNode固定根节点迁移说明

搜索树

组件支持渲染默认的搜索框，可以通过设置 showSearch={true} 来开启搜索框

自定义搜索树

自定义拖拽

默认情况下，节点数据配置了参数 draggable={false} 或 disabled={true} 时，该节点会被禁止拖拽，你可以使用 draggable.nodeDraggable 来自定义节点的拖拽状态。

suffix 尾部图标

showSuffixOnHover={true}（默认）

为了方便使用，Tree 支持传入 suffix 属性，用于渲染右侧图标，默认情况下，尾部图标会根据鼠标 hover 状态变化，如果需要自定义图标，可以通过 suffix 属性传入一个函数，函数的参数为当前节点的数据。

默认情况下，suffx 尾部图标仅在鼠标 hover 节点时显示，但某些场景你可以通过搭配 activeKeys 来强制图标显示。

showSuffixOnHover={false}

你可以通过设置 showSuffixOnHover={false} 使尾部图标常显。

import type { TreeProps } from '@ones-design/tree'

可编辑节点 v1.1+

使用 optionEditable 可以开启节点编辑模式。

节点渲染为 <a> 标签 v1.2+

使用 link 可以将节点渲染为 <a> 标签。TreeProps['link'] 为一个函数，接收节点数据，返回 <a> 标签的属性，TreeNodeProps['link'] 为一个对象，值为 <a> 标签属性， 优先级大于 TreeProps['link']。

Methods

名称	描述	类型
scrollTo	虚拟滚动下，滚动到指定位置或条目	scrollTo(arg: number | ({ index?: number, key?: Key, align?: 'top' | 'bottom' | 'auto', offset?: number })) => void

FAQ 常见问题

Q: 为什么配置了 virtual={true} 后，虚拟列表依然不生效？

A: 由于虚拟列表的特性，请确保你为 Tree 配置了有效的高度 height。