Vue | 一個支持數據抓取的JSON樹組件

一個將 JSON 字符串渲染成樹形結構的 Vue2.x 組件，主要原理是利用 Vue 的遞歸組件，進行深度優先的先序遍歷。不只能夠將一段不可讀的 JSON 字符串轉化爲可讀的樹形結構，同時可用於抓取某一子樹的數據。

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

• 基礎功能: JSON 的美化
• 高級功能: JSON 數據對應層級數據的獲取

設計思路

<tree :parent-data="data" :data="item" :path="path + (Array.isArray(data) ? `[${index}]` : `.${index}`)" :path-checked="pathChecked" :path-selectable="pathSelectable" :selectable-type="selectableType" :index="index" :current-deep="currentDeep" @click="handleItemClick">
</tree>
複製代碼

經過 parent-data 傳入父親的數據，data 傳入孩子的數據，當子樹的數據是簡單類型時，再也不進入遞歸，同時該組件提供了一個 click 事件，用於獲取特定節點的樹數據，而孩子的數據，則經過遞歸機制不斷向上一層級傳遞，相似於「冒泡機制」。

屬性

• 若僅使用基礎功能(JSON美化)，只需關注功能級別爲 基礎 的屬性。
• 若使用高級功能(數據層級的獲取)，需關注 基礎 與 高級 的屬性。

屬性	級別	說明	類型	默認值
data	基礎	待美化的源數據，注意不是 JSON 字符串	JSON 對象	-
deep	基礎	數據深度, 大於該深度的數據將不被展開	number	Infinity
path	高級	定義最頂層數據層級	string	root
pathChecked	高級	定義哪些數據層級是已被選中的	array	[]
pathSelectable	高級	定義哪些數據層級是能夠被選中的	Function(itemPath, itemData)	-
selectableType	高級	定義組件支持的選中方式，默認無選中功能	enum: both, checkbox, tree	-

事件

• 若使用高級功能，下列事件纔是有效的。

事件名	說明	回調參數
click	點擊某一個數據層級時觸發的事件	(path, data)

相似項目對比

vue-json-tree-view	react-json-tree	pretty-json
基於 Vue ，但樣式與 JSON 代碼區別較大	基於 React	基於 JQuery + Bootstrap ，樣式與本項目最接近

項目地址

• 項目地址
• 項目預覽