前言

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

效果

節(jié)點(diǎn)可以無限的遞歸延伸可以展開和收起子節(jié)點(diǎn)如果子節(jié)點(diǎn)全部選擇對應(yīng)的父節(jié)點(diǎn)也應(yīng)該選中，反之父節(jié)點(diǎn)取消選中對應(yīng)子節(jié)點(diǎn)也需要取消選中

API

prop傳遞data屬性，來描述所有的節(jié)點(diǎn)的信息

每個節(jié)點(diǎn)的配置描述如下

title： 展示的標(biāo)題 expand 是否展開節(jié)點(diǎn) checked 是否選中節(jié)點(diǎn) children 子節(jié)點(diǎn)

以及還有兩個event

on-toggle-expand 展開和收起子列表時觸發(fā)的 on-check-change 點(diǎn)擊checkbox觸發(fā)

我們來 init tree主組件

首先需要考慮一個問題因?yàn)閠ree是遞歸遍歷的，因?yàn)槲覀冃枰獎?chuàng)建一個入口組件還有一個遞歸children的組件。

首先創(chuàng)建我們的tree組件

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

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

showCheckbox 就是tree組件接收的 showCheckbox 這里傳給node組件來判斷展示data 為item 是一個object 負(fù)責(zé)渲染當(dāng)前節(jié)點(diǎn)，如果當(dāng)前節(jié)點(diǎn)有children 那就遞歸調(diào)用本身來遞歸渲染這是使用了一個deepCopy的方法，這個是深拷貝的簡單實(shí)現(xiàn)，遞歸的去重新重新賦值data數(shù)組，開辟新的堆內(nèi)存與傳入的數(shù)據(jù)無關(guān)聯(lián)。不會破壞原有的數(shù)據(jù)

我們來 init node遞歸組件

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

展開關(guān)閉按鈕 checkbox 節(jié)點(diǎn)的title 遞歸

node的基本構(gòu)造

prop中的data就是當(dāng)前節(jié)點(diǎn)的所有信息，比如說是否展開和關(guān)閉當(dāng)前的節(jié)點(diǎn)，是否選中，title標(biāo)題以及children的子節(jié)點(diǎn)數(shù)組。

expand 判斷條件為 data.children && data.children.length 才會展示 + 或者 - 按鈕 checkbox就是當(dāng)前的節(jié)點(diǎn)是否需要默認(rèn)勾選

點(diǎn)擊 + 號時會展開當(dāng)前的子節(jié)點(diǎn)，點(diǎn)擊 - 號會關(guān)閉，這一步只需要在handleExpand 中修改data的expand數(shù)據(jù)即可同時我們還需要觸發(fā)一個emit來提示用戶展示或者收起了節(jié)點(diǎn)

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

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

這里有什么區(qū)別呢？如果直接用上面的代碼進(jìn)行修改，就會發(fā)現(xiàn)數(shù)據(jù)雖然被修改了，但是視圖沒有被更新，這是因?yàn)檫@里的this.data 時props通過上一級傳遞出來的，也有可能時node遞歸傳遞的，無論如何咱們需要的cloneData里的節(jié)點(diǎn)數(shù)據(jù)，此時不一定初始化定義時就含有expand或者checked字段 如果不含有直接通過this.data.expand修改，這個expand時不可響應(yīng)式的數(shù)據(jù)，所以視圖不會被更新，干脆就直接用$set來改變

接下來我們就需要處理響應(yīng)狀態(tài)了，大家可能覺得不就是選中和取消嗎 的確這樣可以，但是樹組件時有上下級關(guān)系，他們分為兩種邏輯，當(dāng)選中（或取消選中）一個節(jié)點(diǎn)時

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

第 1 個邏輯相對簡單，當(dāng)選中一個節(jié)點(diǎn)時，只要遞歸地遍歷它下面所屬的所有子節(jié)點(diǎn)數(shù)據(jù)，修改所有的 checked 字段即可

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

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

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

結(jié)語

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

以上就是如何實(shí)現(xiàn)vue的tree組件的詳細(xì)內(nèi)容，更多關(guān)于vue tree組件的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！