成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

基于Vue2.x開發(fā)的JSON樹

lylwyy2016 / 2324人閱讀

摘要:由于項目需要一個解析字符串并生成樹的功能,在上也沒有找到合適的組件,因此基于自己寫了一個樹組件,主要原理是利用的遞歸組件,進行深度優(yōu)先的先序遍歷。該組件不僅可以將一段不可讀的字符串轉化為可讀的樹形結構,同時可用于抓取某一子樹的數(shù)據(jù)。

由于項目需要一個解析 JSON 字符串并生成 JSON 樹的功能,在 GitHub 上也沒有找到合適的組件,因此基于 Vue2.X 自己寫了一個 JSON 樹組件,主要原理是利用 Vue 的遞歸組件,進行深度優(yōu)先的先序遍歷。該組件不僅可以將一段不可讀的 JSON 字符串轉化為可讀的樹形結構,同時可用于抓取某一子樹的數(shù)據(jù)。

Github源碼

Github-Page

組件在它的模板內可以遞歸地調用自己。不過,只有當它有 name 選項時才可以這么做

字符串數(shù)據(jù)美化功能:

特定層級數(shù)據(jù)抓取功能:


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

文章版權歸作者所有,未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉載請注明本文地址:http://systransis.cn/yun/90630.html

相關文章

  • vue2.x-cnode(vue全家桶)

    摘要:后續(xù)會改成的版本安裝安裝編譯語法使用編譯語法圖片路徑與打包安裝引入圖片需要依賴的加載器樣式引入打包文件編譯打包引入樣式文件編譯 vue2.x-cnode 關于項目 vue2.x Cnode社區(qū)是基于vue、vue-router、vuex、axios、es6開發(fā),使用webpack構建工具編譯打包項目 如果此開源項目對大家學習vue的全家桶有幫助,請給我一個star,因為你的star讓我...

    ThinkSNS 評論0 收藏0
  • 前方來報,八月最新資訊--關于vue2&3最佳文章推薦

    摘要:哪吒別人的看法都是狗屁,你是誰只有你自己說了才算,這是爹教我的道理。哪吒去他個鳥命我命由我,不由天是魔是仙,我自己決定哪吒白白搭上一條人命,你傻不傻敖丙不傻誰和你做朋友太乙真人人是否能夠改變命運,我不曉得。我只曉得,不認命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出處 查看github最新的Vue...

    izhuhaodev 評論0 收藏0
  • 我完善了下這個"支持拖拽"組件(Vue2.x)

    摘要:和比起來差別還是挺大的至少能讓別人看得下去了預覽特性雙擊節(jié)點添加一個字節(jié)點對節(jié)點進行任意拖拽控制特定節(jié)點是否可拖是否可放置其他節(jié)點增加刪除任意層級的節(jié)點待添加接口屬性屬性名描述類型默認值節(jié)點樹的數(shù)據(jù)新生成的節(jié)點的文本屬性新增節(jié)點判斷哪些 Github: https://github.com/shuiRong/v...Demo: https://vigilant-curran-d6fec...

    darryrzhong 評論0 收藏0
  • 我完善了下這個"支持拖拽"組件(Vue2.x)

    摘要:和比起來差別還是挺大的至少能讓別人看得下去了預覽特性雙擊節(jié)點添加一個字節(jié)點對節(jié)點進行任意拖拽控制特定節(jié)點是否可拖是否可放置其他節(jié)點增加刪除任意層級的節(jié)點待添加接口屬性屬性名描述類型默認值節(jié)點樹的數(shù)據(jù)新生成的節(jié)點的文本屬性新增節(jié)點判斷哪些 Github: https://github.com/shuiRong/v...Demo: https://vigilant-curran-d6fec...

    Alfred 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<