前言

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

效果

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

API

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

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

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

以及還有兩個(gè)event

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

我們來(lái) init tree主組件

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

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

我們?cè)诔跏蓟约皐atch監(jiān)聽(tīng)的時(shí)候重新深拷貝了一下prop傳來(lái)的data并賦值給了cloneData

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

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

我們來(lái) init node遞歸組件

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

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

node的基本構(gòu)造

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

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

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

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

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

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

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

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

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

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

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

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

結(jié)語(yǔ)

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

以上就是如何實(shí)現(xiàn)vue的tree組件的詳細(xì)內(nèi)容，更多關(guān)于vue
tree組件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論