前言

Tree一直是大家熟知的組件，做一些大型的后臺管理系統都會用到。使用樹組件可以完整的展現其中的層級關系，并具有展開收起選擇等交互功能。

效果

節點可以無限的遞歸延伸可以展開和收起子節點如果子節點全部選擇對應的父節點也應該選中，反之父節點取消選中對應子節點也需要取消選中

API

prop傳遞data屬性，來描述所有的節點的信息

每個節點的配置描述如下

title： 展示的標題 expand 是否展開節點 checked 是否選中節點 children 子節點

以及還有兩個event

on-toggle-expand 展開和收起子列表時觸發的 on-check-change 點擊checkbox觸發

我們來 init tree主組件

首先需要考慮一個問題因為tree是遞歸遍歷的，因為我們需要創建一個入口組件還有一個遞歸children的組件。

首先創建我們的tree組件

我們在初始化以及watch監聽的時候重新深拷貝了一下prop傳來的data并賦值給了cloneData

然后在template里來引入node.vue，然后循環cloneData來循環node.vue。node.vue接受兩個prop

showCheckbox 就是tree組件接收的 showCheckbox 這里傳給node組件來判斷展示data 為item 是一個object 負責渲染當前節點，如果當前節點有children 那就遞歸調用本身來遞歸渲染這是使用了一個deepCopy的方法，這個是深拷貝的簡單實現，遞歸的去重新重新賦值data數組，開辟新的堆內存與傳入的數據無關聯。不會破壞原有的數據

我們來 init node遞歸組件

node組件為主要組件，主要功能是展示當前項的title 以及 如果有children時遞歸本身。

展開關閉按鈕 checkbox 節點的title 遞歸

node的基本構造

prop中的data就是當前節點的所有信息，比如說是否展開和關閉當前的節點，是否選中，title標題以及children的子節點數組。

expand 判斷條件為 data.children && data.children.length 才會展示 + 或者 - 按鈕 checkbox就是當前的節點是否需要默認勾選

點擊 + 號時會展開當前的子節點，點擊 - 號會關閉，這一步只需要在handleExpand 中修改data的expand數據即可同時我們還需要觸發一個emit來提示用戶展示或者收起了節點

這里有一點需要注意 修改data.expand我們通過 VUE的 $set 并沒有像下面這樣

this.data.expand = !this.data.expand;

這里有什么區別呢？如果直接用上面的代碼進行修改，就會發現數據雖然被修改了，但是視圖沒有被更新，這是因為這里的this.data 時props通過上一級傳遞出來的，也有可能時node遞歸傳遞的，無論如何咱們需要的cloneData里的節點數據，此時不一定初始化定義時就含有expand或者checked字段 如果不含有直接通過this.data.expand修改，這個expand時不可響應式的數據，所以視圖不會被更新，干脆就直接用$set來改變

接下來我們就需要處理響應狀態了，大家可能覺得不就是選中和取消嗎 的確這樣可以，但是樹組件時有上下級關系，他們分為兩種邏輯，當選中（或取消選中）一個節點時

它下面的所有子節點都會被選中 如果同一級所有子節點選中時，它的父級也自動選中，一直遞歸判斷到根節點。

第 1 個邏輯相對簡單，當選中一個節點時，只要遞歸地遍歷它下面所屬的所有子節點數據，修改所有的 checked 字段即可

再來看第2個邏輯 一個節點，除了手動選中（或反選），還有就是第 2 種邏輯的被動選中（或反選），也就是說，如果這個節點的所有直屬子節點（就是它的第一級子節點）都選中（或反選）時，這個節點就自動被選中（或反選），遞歸地，可以一級一級響應上去。有了這個思路，我們就可以通過 watch 來監聽當前節點的子節點是否都選中，進而修改當前的 checked 字段：

在 watch 中，監聽了 data.children 的改變，并且是深度監聽的。這段代碼的意思是，當 data.children 中的數據的某個字段發生變化時（這里當然是指 checked 字段）,也就是說它的某個子節點被選中（或反選）了，這時執行綁定的句柄 handler 中的邏輯。const checkedAll = !data.some(item => !item.checked); 也是一個巧妙的縮寫，checkedAll 最終返回結果就是當前子節點是否都被選中了。

這里非常巧妙地利用了遞歸的特性，因為 node.vue 是一個遞歸組件，那每一個組件里都會有 watch 監聽 data.children，要知道，當前的節點有兩個”身份“，它既是下屬節點的父節點，同時也是上級節點的子節點，它作為下屬節點的父節點被修改的同時，也會觸發上級節點中的 watch 監聽函數。這就是遞歸。

結語

遞歸的可以把一個大問題通過不斷調用自身的方式，使代碼簡潔的實現功能，但是個別問題像算法中斐波那契數列如果使用遞歸就會使得時間復雜度以及空間復雜度會飆升。總的來說要合理運用，活學活用。

以上就是如何實現vue的tree組件的詳細內容，更多關于vue tree組件的資料請關注好吧啦網其它相關文章！