利用Vue2.x開(kāi)發(fā)實(shí)現(xiàn)JSON樹(shù)的方法

前言

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

組件在它的模板內(nèi)可以遞歸地調(diào)用自己。不過(guò)，只有當(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>

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

總結(jié)

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com