跳到内容
+

MUI X Tree View

Tree View 组件允许用户浏览具有嵌套层级的数据层级列表，这些层级可以展开和折叠。

可用组件

MUI X Tree View 包公开了该组件的两个不同版本

Simple Tree View

import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';

Tree View 组件的简单版本将其项目作为 JSX 子项接收。这是硬编码项目的推荐版本。

Rich Tree View

import { RichTreeView } from '@mui/x-tree-view/RichTreeView';

Tree View 组件的富版本从外部数据源动态接收其项目。这是较大树以及需要编辑和虚拟化等更高级功能的树的推荐版本。

按 Enter 开始编辑

Tree Item 组件

@mui/x-tree-view 包公开了两个不同的组件来定义您的树项目

  • <TreeItem />
  • <TreeItem2 />

Tree Item

这是一个长期存在的组件，与以前版本（@mui/x-tree-view@6 和 @mui/lab）中使用的组件非常相似。

当使用 Simple Tree View 时，您可以从 @mui/x-tree-view/TreeItem 导入它，并将其用作 Simple Tree View 组件的子组件

import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import { TreeItem } from '@mui/x-tree-view/TreeItem';

export default function App() {
  return (
    <SimpleTreeView>
      <TreeItem itemId="1" label="Item 1" />
      <TreeItem itemId="2" label="Item 2" />
    </SimpleTreeView>
  );
}

当使用 Rich Tree View 时，您不必导入任何内容；它是用于渲染项目的默认组件

import { RichTreeView } from '@mui/x-tree-view/RichTreeView';

export default function App() {
  return <RichTreeView items={ITEMS} />;
}

Tree Item 2

这是一个新组件，它提供了更强大的自定义 API，最终将取代 <TreeItem />。

当使用 Simple Tree View 时，您可以从 @mui/x-tree-view/TreeItem2 导入它，并将其用作 Simple Tree View 组件的子组件

import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import { TreeItem2 } from '@mui/x-tree-view/TreeItem2';

export default function App() {
  return (
    <SimpleTreeView>
      <TreeItem2 itemId="1" label="Item 1" />
      <TreeItem2 itemId="2" label="Item 2" />
    </SimpleTreeView>
  );
}

当使用 Rich Tree View 时，您可以从 @mui/x-tree-view/TreeItem2 导入它，并将其作为 Rich Tree View 组件的插槽传递

import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
import { TreeItem2 } from '@mui/x-tree-view/TreeItem2';

export default function App() {
  return <RichTreeView items={ITEMS} slots={{ item: TreeItem2 }} />;
}