示例學習-樹形選單的形成—使用vue.js

示例學習-樹形選單的形成—使用vue.js

本文是官網示例的學習https://vuefe.cn/v2/examples/tree-view.html,根據其方法,自行進行編寫。

第一步,獲得樹形資料

對於渲染成一個樹形選單,也就是我們平時見到的多級選單,我們首先要將資料處理成樹形結構。這裡筆墨不多寫了,假設我們拿到的demoData就已經是的了。

第二步,渲染資料

假設我們拿到的資料第一層是陣列。

在我們的頁面上只需要有一個ul以及一個我們接下來定義的元件item。這裡由於我們第一層資料是陣列,因此我們在這裡做了一個迴圈。這裡同時要注意vue是使用props從父元件向子元件傳遞資料的,因此我們繫結了:leave=”leave”. 第一個leave是在接下來要說的是item元件中已經定義了的屬性。

下面是元件的最基礎定義:它的基礎結構就是我們希望包含的結構,即item的名字,以及item的子專案的列表,然後在子專案中進行遞迴呼叫這個結構。這裡在對item進行遞迴呼叫時,也要注意需要傳入要渲染的資料,也是通過props進行繫結

第三 實現選單效果

通過以上兩部,我們的資料就可以展現在頁面上,但是這個沒有任何互動效果。我們希望實現的效果是,頁面開啟只有一級選單需要展示的,其它部分都是隱藏的。對於有下級選單的部分,顯示效果為粗體,同時有一個加號在一側,點選可以開啟下一級選單,同時變成減號,點選減號下級選單可以收起。

為了實現以上功能,我們只需要明晰幾點即可:第一,我們需要知道該item是否有下一級,這裡使用vue中新新增的計算屬性功能。牽涉到邏輯運算的都可以放到其中。第二,我們需要顯示下級選單是否已經展開,這裡可以用一個引數來表明是否開關。第三,就是展開和關上選單。這裡寫一個函式,來改變儲存開或者關的引數,每次點選item名字時觸發即可。

完整的程式碼 如下

<iframe width=”100%” height=”300″ src=”//jsfiddle.net/d7k6vz31/2/embedded/js,html,css,result/dark/” allowfullscreen=”allowfullscreen” frameborder=”0″></iframe>