跳到主要內容
+

MUI X Tree View

Tree View 元件讓使用者能瀏覽巢狀階層式資料列表，這些列表層級可以展開和收合。

可用元件

MUI X Tree View 套件公開了此元件的兩個不同版本

簡易 Tree View

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

簡易版 Tree View 元件將項目接收為 JSX 子元素。這是硬編碼項目的建議版本。

豐富 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）中使用的元件非常相似。

當使用簡易 Tree View 時，您可以從 @mui/x-tree-view/TreeItem 匯入它，並將其用作簡易 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>
  );
}

當使用豐富 Tree View 時，您不必匯入任何東西；它是用於渲染項目的預設元件

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

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

Tree Item 2

這是一個新的元件，提供更強大的自訂 API，並最終將取代 <TreeItem />。

當使用簡易 Tree View 時，您可以從 @mui/x-tree-view/TreeItem2 匯入它，並將其用作簡易 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>
  );
}

當使用豐富 Tree View 時，您可以從 @mui/x-tree-view/TreeItem2 匯入它，並將其作為豐富 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 }} />;
}