Quasar Tree 是一個高度可配置的元件，用於顯示階層式資料，例如樹狀結構的目錄。
用法
基本
無連接線
密集v2.2.4+
強制深色模式
效能考量v2.9.2+
當使用相對較大的資料時，為了效能考量，我們建議使用 no-transition 布林屬性，這將顯著提升執行時速度。
<q-tree no-transition ...content_paste
整合範例
更多資訊：QSplitter、QTabPanels。
自訂內容
請注意（在以下範例中）預設標頭和主體插槽的自訂。
請注意（在以下範例中）自訂標頭和主體插槽。
警告
在自訂標頭上點擊或按下 SPACE 或 ENTER 會選取樹狀結構項目（且自訂標頭會失去焦點）。
如果您不希望發生這種情況，只需將自訂標頭的內容包裝在 <div @click.stop @keypress.stop> 中（或將監聽器添加到發射它們的相應元件/元素）。
手風琴、篩選和可選取
在以下範例中，當一個兄弟節點展開時，其他兄弟節點會收縮。
延遲載入
選取 vs 勾選、展開
- 選取（透過 QTree
selected屬性）指的是目前選取的節點（會以不同的背景顏色突出顯示）。 - 勾選（透過 QTree
ticked屬性）指的是與每個節點關聯的核取方塊。 - 展開（透過 QTree
expanded屬性）指的是已展開的節點。
上述所有屬性都需要使用 v-model:<prop_name> 指令動態綁定，才能正確運作（範例：v-model:expanded）。
勾選策略
有三種勾選策略：「leaf」、「leaf-filtered」、「strict」，以及額外的（預設）「none」，它會停用勾選功能。
| 策略 | 描述 |
|---|---|
| leaf | 勾選的節點僅為葉節點。勾選節點也會影響父節點的勾選狀態（父節點變成部分勾選或已勾選），以及其子節點（所有可勾選的子節點都變成已勾選）。 |
| leaf-filtered | 與 leaf 的概念相同，只是此策略僅適用於篩選後的節點（篩選後仍然可見的節點）。 |
| strict | 勾選的節點獨立於父節點或子節點的勾選狀態。 |
您可以為 QTree 套用全域勾選策略，並透過在 nodes 模型中指定 tickStrategy 來局部變更特定節點的勾選策略。
自訂篩選方法
您可以透過指定 filter-method 屬性來自訂篩選方法。以下方法會根據輸入內容進行篩選，如果輸入內容也包含「(*)」。
節點模型結構
以下描述 QTree 的 v-model 會考量到的節點屬性。
| 節點屬性 | 類型 | 不存在時的行為 | 描述 |
|---|---|---|---|
| <nodeKey> | 字串、數字 | 產生錯誤 | 節點的鍵。鍵是從 nodeKey 屬性中指定的鍵選取的。 |
| 標籤 | 字串 | 項目沒有標籤 | 節點的標籤。當設定 labelKey 屬性時，標籤會從該鍵選取。 |
| 圖示 | 字串 | 使用預設圖示 | 節點的圖示。 |
| 圖示顏色 | 字串 | 使用繼承的顏色 | 節點的圖示顏色。Quasar 色彩調色盤中的一種。 |
| 圖片 | 字串 | 不顯示圖片 | 節點的圖片。使用 /public 資料夾。範例：「mountains.png」 |
| 頭像 | 字串 | 不顯示頭像 | 節點的頭像。使用 /public 資料夾。範例：「boy-avatar.png」 |
| 子節點 | 陣列 | 此節點沒有子節點 | 作為子節點的節點陣列。 |
| 已停用 | 布林值 | 節點已啟用 | 節點是否已停用？ |
| 可展開 | 布林值 | 節點可展開 | 節點是否可展開？ |
| 可選取 | 布林值 | 節點可選取 | 節點是否可選取？ |
| 處理器 | 函數 | 不會呼叫額外的函數 | 點擊節點時應呼叫的自訂函數。接收 node 作為參數。 |
| 可勾選 | 布林值 | 節點根據勾選策略可勾選 | 當使用勾選策略時，每個節點都會顯示一個核取方塊。節點的核取方塊是否應停用？ |
| 無勾選 | 布林值 | 節點顯示核取方塊 | 當使用勾選策略時，節點是否應顯示核取方塊？ |
| 勾選策略 | 字串 | 使用勾選策略「none」 | 僅針對此節點覆寫全域勾選策略。可以是「leaf」、「leaf-filtered」、「strict」、「none」之一。 |
| 延遲 | 布林值 | 子節點不會延遲載入 | 子節點是否應延遲載入？在這種情況下，也不要指定「children」屬性。 |
| 標頭 | 字串 | 使用插槽「default-header」 | 節點標頭作用域插槽名稱，不含必要的「header-」前綴。範例：「story」指的是「header-story」作用域插槽。 |
| 主體 | 字串 | 使用插槽「default-body」 | 節點主體作用域插槽名稱，不含必要的「body-」前綴。範例：「story」指的是「body-story」作用域插槽。 |