树 Tree

对于文件夹、分类目录、组织架构等层级较多的内容，树可以清楚显示他们的层级关系，并具有展开、收起、选择等交互功能。

安装

npm install @arco-design/web-react@2.66.18

在入口引入 @arco-design/web-react/dist/css/arco.css，用 ConfigProvider 设置语言。React 19 项目还需在入口最先引入 @arco-design/web-react/es/_util/react-19-adapter，否则 Message、Modal 等命令式 API 无法渲染。

示例

• 基础用法：为每个 TreeNode 节点赋予全局唯一的 key（必填项），title 为该节点显示的内容。
• 由treeData直接生成
• 节点占一行：节点占据一整行。
• 多选：Tree 设置 multiple 属性为true，可以启用多选。
• 带复选框的树：为 Tree 添加 checkable 属性即可使树具有复选框功能，可以用 defaultCheckedKeys 指定复选框默认选中的节点。
• 受控模式：可以指定树的 selectedKeys 或 checkedKeys 或 expandedKeys 属性使树变为受控模式，在对应的 onSelect / onCheck / onExpand 回调中对返回值进行操作。
• 动态加载：动态加载节点。
• 拖拽：可拖拽的树节点。
• 设置回填方式：为 Tree 添加 checkedStrategy 可以设置选中时的回填方式
• 显示连接线：为 Tree 添加 showLine 属性即可使树具有连接线
• 不同尺寸
• 定制节点图标：只需为 TreeNode 指定 icon 属性的值即可为任意节点指定任意图标。
• 定制额外节点：为 Tree 设置 renderExtra 可以自定义树节点的展示。
• 定制组件图标：通过icons 属性即可设置组件 loadingIcon,dragIcon,switcherIcon。
• 虚拟列表：通过指定 virtualListProps 来开启虚拟列表，在大量数据时获得高性能表现。
• 搜索树
• 自定义 TreeData 的字段名称：通过 fieldNames 字段可以自定义 TreeData 的字段名。

示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。

API

Tree

Tree.Node

AllowDrop

export type AllowDrop = (options: {
  dropNode: NodeInstance;
  dragNode: NodeInstance | null;
  dropPosition: number;
}) => boolean;

TreeDataType

export type TreeDataType = NodeProps & {
  key?: string;
  _index?: number;
  children?: TreeDataType[];
  [key: string]: any;
};

FieldNamesType

export type FieldNamesType = {
  key?: string;
  title?: string;
  disabled?: string;
  children?: string;
  isLeaf?: string;
  disableCheckbox?: string;
  checkable?: string;
};

AvailableVirtualListProps

export type AvailableVirtualListProps = Pick<
  VirtualListProps<any>,
  | "height"
  | "itemHeight"
  | "threshold"
  | "isStaticItemHeight"
  | "scrollOptions"
  | "onScroll"
  | "wrapperChild"
>;

ActionOnClick

export type ActionOnClick = "select" | "check" | "expand";

NodeInstance

export type NodeInstance = ReactElement<
  PropsWithChildren<NodeProps>,
  typeof TreeNode
>;

VirtualListProps

常见问题

1. Tree 设置了autoExpandParent=true，但没有默认展开全部节点？

autoExpandParent 仅在 Tree 第一次挂载的时候生效。如果数据是从远程获取，可以在数据获取完成后，再去渲染 Tree 组件。