利用Vue2.x開發(fā)實現(xiàn)JSON樹的方法
更新時間：2018年01月04日 10:07:58 作者：DanielLi
這篇文章主要給大家介紹了關于利用Vue2.x開發(fā)實現(xiàn)JSON樹的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。
前言
最近工作中遇到一個需求，由于項目需要一個解析 JSON 字符串并生成 JSON 樹的功能，在 GitHub 上也沒有找到合適的組件，因此基于 Vue2.X 自己寫了一個 JSON 樹組件，主要原理是利用 Vue 的遞歸組件，進行深度優(yōu)先的先序遍歷。該組件不僅可以將一段不可讀的 JSON 字符串轉化為可讀的樹形結構，同時可用于抓取某一子樹的數(shù)據(jù)。
組件在它的模板內可以遞歸地調用自己。不過，只有當它有 name 選項時才可以這么做
字符串數(shù)據(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ù)，當子樹的數(shù)據(jù)是簡單類型時，不再進入遞歸，同時該組件提供了一個 click 事件，用于獲取特定節(jié)點的樹數(shù)據(jù)，而孩子的數(shù)據(jù)，則通過遞歸機制不斷向上一層級傳遞，類似于“冒泡機制”。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關文章
vue favicon設置以及動態(tài)修改favicon的方法
這篇文章主要介紹了vue favicon設置以及動態(tài)修改favicon的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了Vue-cli3.X使用px2rem遇到的問題及解決方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了關于vue屬性使用和不使用冒號的區(qū)別說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了如何在vue3中同時使用tsx與setup語法糖，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
某些應用場景會給點擊事件添加權限，不存在權限就攔截點擊事件，有權限就繼續(xù)正常觸發(fā)點擊事件。這樣的效果是如何實現(xiàn)的呢，本文就來和大家詳細講講2023-02-02
這篇文章主要介紹了antdv vue upload自定義上傳結合表單提交方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了VueCli3.0中集成MockApi的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-07-07
Vue中實現(xiàn)動態(tài)更新JSON數(shù)據(jù)的三種方式
在 Vue 項目中動態(tài)更新 JSON 數(shù)據(jù),可以通過以下幾種方式實現(xiàn),具體方法取決于你的需求,比如數(shù)據(jù)是存儲在前端還是后端、是否需要持久化等,文中通過代碼示例講解的非常詳細,需要的朋友可以參考下2025-04-04
一文帶你了解什么是Vue的前端微服務架構(Micro Frontends)
微前端架構是一種將大型前端應用拆分為多個小型、獨立的前端應用的架構風格,每個小型前端應用都可以獨立部署、獨立開發(fā)和獨立運行,下面我們就來學習一下它的相關使用吧2023-11-11
這篇文章主要介紹了vue自定義全局組件(自定義插件)的用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01