利用Vue2.x開發(fā)實(shí)現(xiàn)JSON樹的方法
前言
最近工作中遇到一個(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ù)。
組件在它的模板內(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ì)腳本之家的支持。
相關(guān)文章
vue favicon設(shè)置以及動(dòng)態(tài)修改favicon的方法
這篇文章主要介紹了vue favicon設(shè)置以及動(dòng)態(tài)修改favicon的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了Vue-cli3.X使用px2rem遇到的問題及解決方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
關(guān)于vue屬性使用和不使用冒號(hào)的區(qū)別說明
這篇文章主要介紹了關(guān)于vue屬性使用和不使用冒號(hào)的區(qū)別說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了如何在vue3中同時(shí)使用tsx與setup語法糖，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
Vue3實(shí)現(xiàn)自定義指令攔截點(diǎn)擊事件的示例代碼
某些應(yīng)用場(chǎng)景會(huì)給點(diǎn)擊事件添加權(quán)限，不存在權(quán)限就攔截點(diǎn)擊事件，有權(quán)限就繼續(xù)正常觸發(fā)點(diǎn)擊事件。這樣的效果是如何實(shí)現(xiàn)的呢，本文就來和大家詳細(xì)講講2023-02-02
antdv vue upload自定義上傳結(jié)合表單提交方式
這篇文章主要介紹了antdv vue upload自定義上傳結(jié)合表單提交方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了VueCli3.0中集成MockApi的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
Vue中實(shí)現(xiàn)動(dòng)態(tài)更新JSON數(shù)據(jù)的三種方式
在 Vue 項(xiàng)目中動(dòng)態(tài)更新 JSON 數(shù)據(jù),可以通過以下幾種方式實(shí)現(xiàn),具體方法取決于你的需求,比如數(shù)據(jù)是存儲(chǔ)在前端還是后端、是否需要持久化等,文中通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下2025-04-04
一文帶你了解什么是Vue的前端微服務(wù)架構(gòu)(Micro Frontends)
微前端架構(gòu)是一種將大型前端應(yīng)用拆分為多個(gè)小型、獨(dú)立的前端應(yīng)用的架構(gòu)風(fēng)格,每個(gè)小型前端應(yīng)用都可以獨(dú)立部署、獨(dú)立開發(fā)和獨(dú)立運(yùn)行,下面我們就來學(xué)習(xí)一下它的相關(guān)使用吧2023-11-11
這篇文章主要介紹了vue自定義全局組件(自定義插件)的用法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01