前言

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

• Github源碼
• Github-Page

組件在它的模板內(nèi)可以遞歸地調(diào)用自己。不過，只有當(dāng)它有 name 選項(xiàng)時(shí)才可以這么做

字符串?dāng)?shù)據(jù)美化功能：

特定層級(jí)數(shù)據(jù)抓取功能：

<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 傳入父親的數(shù)據(jù)，data 傳入孩子的數(shù)據(jù)，當(dāng)子樹的數(shù)據(jù)是簡(jiǎn)單類型時(shí)，不再進(jìn)入遞歸，同時(shí)該組件提供了一個(gè) click 事件，用于獲取特定節(jié)點(diǎn)的樹數(shù)據(jù)，而孩子的數(shù)據(jù)，則通過遞歸機(jī)制不斷向上一層級(jí)傳遞，類似于“冒泡機(jī)制”。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)武林網(wǎng)的支持。