一個將 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 ，樣式與本專案最接近 |