利用Vue2.x开发实现JSON树的方法


Posted in Javascript onJanuary 04, 2018

前言

最近工作中遇到一个需求,由于项目需要一个解析 JSON 字符串并生成 JSON 树的功能,在 GitHub 上也没有找到合适的组件,因此基于 Vue2.X 自己写了一个 JSON 树组件,主要原理是利用 Vue 的递归组件,进行深度优先的先序遍历。该组件不仅可以将一段不可读的 JSON 字符串转化为可读的树形结构,同时可用于抓取某一子树的数据。

  • Github源码
  • Github-Page

组件在它的模板内可以递归地调用自己。不过,只有当它有 name 选项时才可以这么做

字符串数据美化功能:

利用Vue2.x开发实现JSON树的方法

特定层级数据抓取功能:

利用Vue2.x开发实现JSON树的方法

<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 传入父亲的数据,data 传入孩子的数据,当子树的数据是简单类型时,不再进入递归,同时该组件提供了一个 click 事件,用于获取特定节点的树数据,而孩子的数据,则通过递归机制不断向上一层级传递,类似于“冒泡机制”。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
随机显示经典句子或诗歌的javascript脚本
Aug 04 Javascript
jQuery 打造动态渐变按钮 详细图文教程
Apr 25 Javascript
js实现杯子倒水问题自动求解程序
Mar 25 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
Aug 25 Javascript
javascript dom追加内容实现示例
Sep 21 Javascript
Javascript 函数parseInt()转换时出现bug问题
May 20 Javascript
js中style.display=&quot;&quot;无效的解决方法
Oct 30 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
May 24 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
Jun 23 Javascript
微信小程序 label 组件详解及简单实例
Jan 10 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
Aug 16 Javascript
动态实现element ui的el-table某列数据不同样式的示例
Jan 22 Javascript
vue-cli配置文件——config篇
Jan 04 #Javascript
jQuery封装animate.css的实例
Jan 04 #jQuery
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
Jan 04 #Javascript
浅谈vuex 闲置状态重置方案
Jan 04 #Javascript
详解Angular5 服务端渲染实战
Jan 04 #Javascript
JavaScript中的高级函数
Jan 04 #Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
Jan 04 #Javascript
You might like
解析link_mysql的php版
2013/06/30 PHP
php自定义函数转换html标签示例
2016/09/29 PHP
永不消失的title提示代码
2007/02/15 Javascript
JavaScript asp.net 获取当前超链接中的文本
2009/04/14 Javascript
Javascript UrlDecode函数代码
2010/01/09 Javascript
可编辑下拉框的2种实现方式
2014/06/13 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
2015/09/04 Javascript
jQuery实现div拖拽效果实例分析
2016/02/20 Javascript
javascript中不易分清的slice,splice和split三个函数
2016/03/29 Javascript
详解JavaScript中数组的reduce方法
2016/12/02 Javascript
Javascript 实现计算器时间功能详解及实例(二)
2017/01/08 Javascript
webpack入门必知必会
2017/01/16 Javascript
微信小程序 slider的简单实例
2017/04/19 Javascript
使用node.js搭建服务器
2017/05/20 Javascript
jQuery实现简单的滑动导航代码(移动端)
2017/05/22 jQuery
关于JSON解析的实现过程解析
2019/10/08 Javascript
封装一下vue中的axios示例代码详解
2020/02/16 Javascript
js实现可爱的气泡特效
2020/09/05 Javascript
Vue与React的区别和优势对比
2020/12/18 Vue.js
Python实现抓取百度搜索结果页的网站标题信息
2015/01/22 Python
Python中单、双下划线的区别总结
2017/12/01 Python
python获取当前文件路径以及父文件路径的方法
2019/07/10 Python
python lambda表达式(匿名函数)写法解析
2019/09/16 Python
用python解压分析jar包实例
2020/01/16 Python
Python中zip()函数的解释和可视化(实例详解)
2020/02/16 Python
Python正则表达式如何匹配中文
2020/05/27 Python
Python通过kerberos安全认证操作kafka方式
2020/06/06 Python
html Table 表头固定的实现
2019/01/22 HTML / CSS
美国排名第一的泳池用品直接来源:In The Swim
2019/09/23 全球购物
JAVA和C++区别都有哪些
2015/03/30 面试题
军训自我鉴定范文
2014/02/13 职场文书
仓库管理员岗位职责
2014/03/19 职场文书
2015年反腐倡廉工作总结
2015/05/14 职场文书
护理专业毕业自我鉴定
2019/08/12 职场文书
MySQL学习之基础操作总结
2022/03/19 MySQL
浅析Python OpenCV三种滤镜效果
2022/04/11 Python