基於Vue2 x開發的JSON樹

2021-09-14 03:15:22 字數 674 閱讀 7328

由於專案需要乙個解析json字串並生成json樹的功能,在 github 上也沒有找到合適的元件,因此基於 vue2.x 自己寫了乙個json樹元件,主要原理是利用 vue 的遞迴元件,進行深度優先的先序遍歷。該元件不僅可以將一段不可讀的json字串轉化為可讀的樹形結構,同時可用於抓取某一子樹的資料。

元件在它的模板內可以遞迴地呼叫自己。不過,只有當它有 name 選項時才可以這麼做
字串資料美化功能:

特定層級資料抓取功能:

通過parent-data傳入父親的資料,data傳入孩子的資料,當子樹的資料是簡單型別時,不再進入遞迴,同時該元件提供了乙個click事件,用於獲取特定節點的樹資料,而孩子的資料,則通過遞迴機制不斷向上一層級傳遞,類似於「冒泡機制」。

vue2 x知識總結

data data data data 逆轉訊息 data methods data 現在我們為每個 todo item 提供 todo 物件 todo 物件是變數,即其內容可以是動態的。我們也需要為每個元件提供乙個 key 稍後再 作詳細解釋。vue.component todo item dat...

Vue2 X的入門學習

由於前幾天跟那位技術聊了一會,深感自己目前所學知識的淺薄以及實戰經驗的缺失。今天初步了解了一下前端的vue.js 時間不長,只是看了一些基本內容,肯定也是做不了什麼大專案的,這裡回憶一下所學知識。1.引入vue 此處利用script直接引用,另外呢,vue官網是給了很多教程的,對新手是很友好的 官網...

vue2 x 許可權管理實現

由於工作的需求,前後端分離,需要對頁面中的資源許可權控制,到按鈕級別。開發步驟 1 制定 資源的命名規則 系統名 模組名 頁面名 功能名 2 收集各個頁面所有需要管控按鈕的資源,用乙個excel來整理 退出編輯備註 a.v privilege 表示是使用的指令 b.privilegeid 表示資源的...