SuperAPI AI 工具集

tree-view

前端与建站

查看项目

更新于 10-16 04:05

技能介绍

MUI X Tree View 是 MUI X 体系中的树形视图组件,用于在 React 界面中呈现和操作层级结构数据。

用途

该组件适合展示文件目录、组织架构、权限配置、分类选择等具有父子层级关系的数据,并支持用户展开、折叠、选中节点。

主要能力

  • SimpleTreeView:使用声明式 JSX 子节点构建树,每个 TreeItem 需要 itemId 和 label,支持展开、选中、键盘导航和图标。
  • RichTreeView:从 items 数组以数据驱动方式渲染,每个条目实现 TreeViewBaseItem,可定义带额外字段的自定义条目类型。
  • 受控展开与选中:通过 expandedItems、onExpandedItemsChange、selectedItems、onSelectedItemsChange 等属性控制状态。
  • 懒加载:可在节点展开时按需获取子节点,支持手动模式,也可使用 experimentalFeatures 与 dataSource 属性接入异步数据源。
  • 自定义图标:可通过 slots 全局覆盖展开、折叠、末端图标,也可在 TreeItem 上按条目设置图标。
  • 多选与复选框:启用 multiSelect 和 checkboxSelection 实现基于复选框的多选模型。
  • 条目内容定制:可使用 TreeItem 的 label 传入自定义内容,或通过 useTreeItem 钩子与 TreeItemContent、TreeItemRoot 等组件完全自定义条目渲染。
  • 拖拽与虚拟化:拖拽排序和虚拟化需要 RichTreeViewPro,来自 @mui/x-tree-view-pro,属于 Premium 许可。

使用方式

安装后从对应路径导入组件,例如从 @mui/x-tree-view/SimpleTreeView 导入 SimpleTreeView,从 @mui/x-tree-view/TreeItem 导入 TreeItem,从 @mui/x-tree-view/RichTreeView 导入 RichTreeView。TreeItem 应始终从 @mui/x-tree-view/TreeItem 或 @mui/x-tree-view 导入。

适用场景

适用于需要在 React 应用中展示层级数据、文件浏览器、权限选择器、分类树等交互场景。

限制

拖拽排序和虚拟化仅在 RichTreeViewPro 中提供,需要 Premium 许可。懒加载的 dataSource 方式依赖较新 MUI X 版本。具体版本要求、价格和完整 API 细节暂未提供。