我開源了一個基於Vue的組織架構樹組件

點贊再看，養成習慣

本文 GitHub https://github.com/qq44924588... 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。

開門見山

Demo 演示地址：http://www.longstudy.club/vue...

github 地址：https://github.com/qq44924588...

項目背景

由於最近公司須要作一個OKR，OKR 裏面有個對齊視圖，是一個數型結構，以下圖所示：

就拿我 小智 來講，若是有人對齊個人 KR 就放到個人右邊，若是是我對齊了誰的 KR，就放到個人左邊，相似一個上下級的關係，因此這裏我用兩棵樹來表示左邊與右邊的關係。

在GitHub上找了半天，這類組件很少，也沒有符合業務需求的組件，因此決定本身造輪子！

分析

• 既然是樹，那麼每一個節點都應該是相同的組件
• 節點下面套節點，因此節點組件應該是一個遞歸組件
• 整棵樹應該有一個全局的狀態，用來管理從外部傳入的值以及向外部提供的屬性和方法。
• 每相樹節點應該也要有一個對應的節點狀態，來管理節點自身屬性和方法。

實現思路

遞歸組件

對於遞歸組件，Vue 官方文檔是這樣說的：

組件在它的模板內能夠遞歸地調用本身。不過，只有當它有 name 選項時才能夠這麼作。

這裏我用 OkrTreeNode.vue 來表示樹的節點，裏面是這樣用遞歸，下面是該組件簡定：

<template>
  <OkrTreeNode
    v-for="child in leftChildNodes"
    :node="child"
  ></OkrTreeNode>
</template>

export default {
  name: 'OkrTreeNode'
}

遞歸組件的使用須要注意的兩點是組件裏面要有組件name 以及結束遞歸的條件。

樹的狀態

對於樹的狀態，我用一個 TreeStore 類來表示，該實現方式主要是參考 ElementUI 中的 tree 組件。TreeStore 中的屬性就表示我外部傳入的 pros 或者 attr 或者 事件和方法，都在這個對象裏面管理，具體的代碼能夠看這裏：

https://github.com/qq44924588...

節點的狀態

對於節點的狀態，我用一個 Node 對象來表示，具體的代碼能夠看下面這個地址，這裏就不展開說了：

https://github.com/qq44924588...

Demo 演示

基礎用法

基礎的樹形結構展現，默認方式垂直方向。

水平方向

將 direction 屬性設置爲 horizontal 就能夠展現水平方向。

節點是否可被展開

節點可被展開,默認是不展開，經過show-collapsable設置節點可被展開。

節點默認所有展開

經過設置 default-expand-all 默認展開全部節點，該參數只有在 show-collapsable 爲true 時有效

可將 Tree 的某些節點設置爲默認展開

經過 default-expanded-keys 設置默認展開的節點。須要注意的是，此時必須設置 node-key ，其值爲節點數據中的一個字段名，該字段在整棵樹中是惟一的。

節點的樣式

可自行設置節點的默認樣式和選中的樣式。

經過 label-class-name 設置節點的樣式，支持字符和函數方式。經過 current-lable-class-name 設置當前節點選中的樣式，支持字符和函數方式。

節點自定義內容

可自行設置節點內容。經過 render-content 渲染節點內容。

OKR 展現模式

該模式的出現，是爲了實現跟飛書OKR 展現的視圖同樣效果，因此在 Tree 的模式下，擴展成左右兩棵子樹。
該模式必須設置 onlyBothTree ，以及經過 leftData表示左子數的結構。

OKR 展現模式之自定義節點內容

與上常規 Tree 同樣，咱們也能夠經過自定義渲染函數來制定節點的內容。

經過 render-content 渲染節點內容，經過返回 node 中的 isLeftChild 判斷是不是左邊的樹。

節點過濾(不可展開)及支持的方法

經過關鍵字過濾樹節點，在須要對節點進行過濾時，調用 Tree 實例的 filter 方法，參數爲關鍵字。須要注意的是，此時須要設置 filter-node-method ，值爲過濾函數。

節點過濾(可被展開)

經過關鍵字過濾樹節點，在須要對節點進行過濾時，調用 Tree 實例的 filter 方法，參數爲關鍵字。須要注意的是，此時須要設置 filter-node-method ，值爲過濾函數。

支持的事件(不可展開)

不可展開時支持的事件有 節點點擊 和 鼠標右鍵點擊。

支持的事件(可被展開)

可展開時支持的事件有 節點點擊、鼠標右鍵點擊，節點的展開以及節點的關閉。

Attributes

參數	說明	類型	可選值	默認值
data	展現數據	array	—	—
direction	樹的展開方向	String	horizontal / vertical	vertical
onlyBothTree	子樹在根節點左右兩邊展開，該模式只有在 direction 爲 horizontal 有效，且必須提供 leftData 數據	Boolean	—	false
leftData	展現左子數的數據，該屬性於在 onlyBothTree 模式啓用	array	—	—
label-width	節點的寬度，默認爲自動寬度。若是 label-width 爲 number 類型，單位 px；若是 label-width 爲 string 類型，則這個寬度會設置爲 節點 的 style.width 的值，節點的寬度會受控於外部樣式	string/number	—	—
label-height	節點的高度，默認爲自動高度。若是 label-height 爲 number 類型，單位 px；若是 label-height 爲 string 類型，則這個高度會設置爲 節點 的 style.height 的值，節點的高度會受控於外部樣式	string/number	—	—
label-class-name	節點 className 的回調方法，也可使用字符串爲全部的節點設置一個固定的 className	Function(node)/String	—	—
current-lable-class-name	當前選中節點的樣式	Function(node)/String	—	—
show-collapsable	節點是否可被展開	Boolean	—	false
default-expand-all	是否默認展開全部節點，該參數只有在 show-collapsable 爲 true 時有效	Boolean	—	false
render-content	樹節點的內容區的渲染 Function	Function(h, node)	—	—
props	配置選項，具體看下錶	object	—	—
node-key	每一個樹節點用來做爲惟一標識的屬性，整棵樹應該是惟一的	String	—	—
default-expanded-keys	默認展開的節點的 key 的數組(須要注意的是，此時必須設置node-key，其值爲節點數據中的一個字段名，該字段在整棵樹中是惟一的。)	array	—	—
filter-node-method	對樹節點進行篩選時執行的方法，返回 true 表示這個節點能夠顯示，返回 false 則表示這個節點會被隱藏	Function(value, data, node)	—	—

props

參數	說明	類型	可選值	默認值
label	指定節點標籤爲節點對象的某個屬性值	string, function(data, node)	—	—
children	指定節點標籤爲節點對象的某個屬性值	string	—	—

Events

事件名稱	說明	回調參數
node-click	節點被點擊時的回調	共三個參數，依次爲：傳遞給 data 屬性的數組中該節點所對應的對象、節點對應的 Node、節點組件自己。
node-expand	節點被展開時觸發的事件	共三個參數，依次爲：傳遞給 data 屬性的數組中該節點所對應的對象、節點對應的 Node、節點組件自己
node-collapse	節點被關閉時觸發的事件	共三個參數，依次爲：傳遞給 data 屬性的數組中該節點所對應的對象、節點對應的 Node、節點組件自己
node-contextmenu	當某一節點被鼠標右鍵點擊時會觸發該事件	共四個參數，依次爲：event、傳遞給 data 屬性的數組中該節點所對應的對象、節點對應的 Node、節點組件自己。

方法

方法名	說明	回調參數
filter	對樹節點進行篩選操做	接收一個任意類型的參數，該參數會在 filter-node-method 中做爲第一個參數
getNode	根據 data 或者 key 拿到 Tree 組件中的 node,使用此方法必須設置 node-key 屬性	(data) 要得到 node 的 key 或者 data
setCurrentNode	經過 node 設置某個節點的當前選中狀態，使用此方法必須設置 node-key 屬性	(node) 待被選節點的 node
setCurrentKey	經過 key 設置某個節點的當前選中狀態，使用此方法必須設置 node-key 屬性	(key) 待被選節點的 key，若爲 null 則取消當前高亮的節點
getCurrentKey	獲取當前被選中節點的 key，使用此方法必須設置 node-key 屬性，若沒有節點被選中則返回 null	—
getCurrentNode	獲取當前被選中節點的 data，若沒有節點被選中則返回 null	—
remove	刪除 Tree 中的一個節點，使用此方法必須設置 node-key 屬性	(data) 要刪除的節點的 id 或者 data 或者 node
append	爲 Tree 中的一個節點追加一個子節點	(data, parentNode) 接收兩個參數，1. 要追加的子節點的 data 2. 子節點的 parent 的 data、key 或者 node
insertBefore	爲 Tree 的一個節點的前面增長一個節點	(data, refNode) 接收兩個參數，1. 要增長的節點的 data 2. 要增長的節點的後一個節點的 data、key 或者 node
insertAfter	爲 Tree 的一個節點的後面增長一個節點	(data, refNode) 接收兩個參數，1. 要增長的節點的 data 2. 要增長的節點的前一個節點的 data、key 或者 node

瀏覽器支持狀況

Modern browsers and Internet Explorer 10+.

若是你以爲還不錯的話，還請幫忙在 github 上給個 star，若是你以爲哪些須要優化的能夠到 github 上提個 PR。

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

交流

文章每週持續更新，能夠微信搜索「 大遷世界 」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。