【開發日誌】用 Vue 樹狀結構來做多階層選單

這次我要教學的是多層式的選單，算是比較複雜的選單邏輯，階層的數量由資料庫內決定，程式部份則由遞迴方式檢查階層深度，再輸出陣列到前端，前端使用 Bootstrap 樣式以及 Vue.js 綁定元件來呈現多層選單結果。

如何規劃網站設計樹狀圖？ 如果你的網站有一個核心想要呈現給人的感覺、想告訴別人的故事，那麼你就會需要先規劃好「網站架構」，再透過設計去實現這些網站架構，把你想要說的話透過設計表現出來。

但是，樹狀選單通常是利用 JavaScript 來製作，這對於不了解 JavaScript 的人而言，要製作樹狀選單可是一大問題。 那麼，Sothink Tree Menu 就是一個最合適的軟體了，它的功能雖然非常地強大，但卻非常地容易使用。 它具有高度的自訂性，且相容於多數的瀏覽器。

本篇教學整理了三種選單方式，無論是橫向展開還是直向收闔，都能快速製作下拉選單，讓你的網站導航更簡單、更高效。

就讓我們來試試看書籍分類的選單吧，前面會先介紹表單的基本設置，最後會介紹如何讓選單有階層的感覺、以及展開和收起的呈現。

Web中最最基本的架構就是 [樹狀選單]，以現在前端框架氾濫的年代，多數都已經有Tree的Component，而最需要的就是組選單的部分。

但是，我們可以根據需求客製化樹狀選單，例如使用CSS調整樣式，或在資料層中新增更多的欄位和方法來顯示更多的節點資訊和事件。