利用Vue2.x開發(fā)實(shí)現(xiàn)JSON樹的方法
前言
最近工作中遇到一個(gè)需求，由于項(xiàng)目需要一個(gè)解析 JSON 字符串并生成 JSON 樹的功能，在 GitHub 上也沒(méi)有找到合適的組件，因此基于 Vue2.X 自己寫了一個(gè) JSON 樹組件，主要原理是利用 Vue 的遞歸組件，進(jìn)行深度優(yōu)先的先序遍歷。該組件不僅可以將一段不可讀的 JSON 字符串轉(zhuǎn)化為可讀的樹形結(jié)構(gòu)，同時(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ù)據(jù)是簡(jiǎn)單類型時(shí)，不再進(jìn)入遞歸，同時(shí)該組件提供了一個(gè) click 事件，用于獲取特定節(jié)點(diǎn)的樹數(shù)據(jù)，而孩子的數(shù)據(jù)，則通過(guò)遞歸機(jī)制不斷向上一層級(jí)傳遞，類似于“冒泡機(jī)制”。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
這篇文章主要介紹了Vue 監(jiān)聽元素前后變化值實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
vue3+ts+MicroApp實(shí)戰(zhàn)教程
這篇文章主要介紹了vue3+ts+MicroApp實(shí)戰(zhàn)教程,分別在主應(yīng)用項(xiàng)目(main)和子應(yīng)用(childrenOne,childrenTwo)項(xiàng)目中安裝microApp，本文給大家詳細(xì)講解，需要的朋友可以參考下2022-10-10
apache和nginx下vue頁(yè)面刷新404的解決方案
這篇文章主要介紹了apache和nginx下vue頁(yè)面刷新404的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
使用Vue.js實(shí)現(xiàn)一個(gè)循環(huán)倒計(jì)時(shí)功能
在Web應(yīng)用中,倒計(jì)時(shí)功能常用于各種場(chǎng)景,如活動(dòng)倒計(jì)時(shí)、定時(shí)任務(wù)提醒等,Vue.js作為一款輕量級(jí)的前端框架,提供了豐富的工具和API來(lái)實(shí)現(xiàn)這些功能,本文將詳細(xì)介紹如何使用Vue.js實(shí)現(xiàn)一個(gè)循環(huán)倒計(jì)時(shí)功能,需要的朋友可以參考下2024-09-09
淺談vue-cli5關(guān)于yarn的一個(gè)小坑
本文主要介紹了vue-cli5關(guān)于yarn的一個(gè)小坑，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
這篇文章主要給大家介紹了關(guān)于Vue3父子組件相互調(diào)用方法的相關(guān)資料,vue中我們常常用到組件,那么組件中互相調(diào)用也是經(jīng)常遇到的,需要的朋友可以參考下2023-08-08
這篇文章主要為大家介紹了eslint在vue中如何使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
vue中的過(guò)濾器及其時(shí)間格式化問(wèn)題
這篇文章主要介紹了vue中的過(guò)濾器及其時(shí)間格式化,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-04-04
關(guān)于Ant-Design-Vue快速上手指南+排坑
這篇文章主要介紹了關(guān)于Ant-Design-Vue快速上手指南+排坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了vue中的provide / inject 有什么用處,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-11-11