使用Vue2.x如何實作JSON樹

這篇文章主要為大家介紹了關於利用Vue2.x開發實現JSON樹的相關資料，文中透過範例程式碼介紹的非常詳細，對大家的學習或工作具有一定的參考學習價值

前言

最近工作中遇到一個需求，由於專案需要一個解析JSON 字串並產生JSON 樹的功能，在GitHub 上也沒有找到合適的組件，因此基於Vue2.X 自己寫了一個JSON 樹組件，主要原理是利用Vue 的遞歸組件，進行深度優先的先序遍歷。此元件不僅可將一段不可讀取的 JSON 字串轉換為可讀的樹狀結構，同時可用於抓取某一子樹的資料。

• Github原始碼

• Github-Page

元件在它的範本內可以遞歸地調用自己。不過，只有當它有name 選項時才可以這麼做

字串資料美化功能：

特定層級資料抓取功能：

<tree
 :parent-data="data"
 :data="item"
 :path="path + (Array.isArray(data) ? `[${index}]` : `.${index}`)"
 :path-checked="pathChecked"
 :path-selectable="pathSelectable"
 :selectable-type="selectableType"
 :index="index"
 :child="true"
 @click="handleItemClick">
</tree>

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

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

在vue中如何使用ueditor

#使用React Native如何實作自訂控制項底部抽屜選單

在vue中使用ref 讓父元件呼叫子元件

如何實作web前端頁面產生exe

如何實現ajax前台後台跨域請求

#

以上是使用Vue2.x如何實作JSON樹的詳細內容。更多資訊請關注PHP中文網其他相關文章！