使用Vue2.x如何實現JSON樹

前言

最近工作中遇到一個需求，由于項目需要一個解析 JSON 字符串并生成 JSON 樹的功能，在 GitHub 上也沒有找到合適的組件，因此基于 Vue2.X 自己寫了一個 JSON 樹組件，主要原理是利用 Vue 的遞歸組件，進行深度優先的先序遍歷。該組件不僅可以將一段不可讀的 JSON 字符串轉化為可讀的樹形結構，同時可用于抓取某一子樹的數據。

組件在它的模板內可以遞歸地調用自己。不過，只有當它有 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前臺后臺跨域請求

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com