利用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技巧之不要用for in语句对数组进行遍历
Oct 20 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
Dec 29 Javascript
JavaScript的strict模式与with关键字介绍
Feb 08 Javascript
JS替换字符串中字符即替换全部而不是第一个
Jun 04 Javascript
jquery+ajax实现跨域请求的方法
Jan 20 Javascript
学习JavaScript编程语言的8张思维导图分享
Mar 27 Javascript
javascript伸缩菜单栏实现代码分享
Nov 12 Javascript
javascript实现计时器的简单方法
Feb 21 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
Oct 24 Javascript
原生js实现日期计算器功能
Feb 17 Javascript
浅谈Vue的加载顺序探讨
Oct 25 Javascript
Vue触发隐藏input file的方法实例详解
Aug 14 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
PHP统计nginx访问日志中的搜索引擎抓取404链接页面路径
2014/06/30 PHP
PHP实现的观察者模式实例
2017/06/21 PHP
PHP API接口必备之输出json格式数据示例代码
2017/06/27 PHP
jQuery Flash/MP3/Video多媒体插件
2010/01/18 Javascript
原创javascript小游戏实现代码
2010/08/19 Javascript
JQuery中的$.getJSON 使用说明
2011/03/10 Javascript
js控制表单不能输入空格的小例子
2013/11/20 Javascript
jquery增加和删除元素的方法
2015/01/14 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
2016/01/27 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
2016/09/19 Javascript
Javascript for in的缺陷总结
2017/02/03 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
2017/05/03 Javascript
react 父组件与子组件之间的值传递的方法
2017/09/14 Javascript
webpack4.x CommonJS模块化浅析
2018/11/09 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
2018/11/20 Javascript
Echarts实现单条折线可拖拽效果
2019/12/19 Javascript
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
python函数局部变量用法实例分析
2015/08/04 Python
linux环境下Django的安装配置详解
2019/07/22 Python
使用 Python 快速实现 HTTP 和 FTP 服务器的方法
2019/07/22 Python
pytorch 预训练层的使用方法
2019/08/20 Python
Python Opencv中用compareHist函数进行直方图比较对比图片
2020/04/07 Python
Keras实现支持masking的Flatten层代码
2020/06/16 Python
python中常见错误及解决方法
2020/06/21 Python
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
阿根廷在线宠物商店:Puppis
2018/03/23 全球购物
俄罗斯EPL钻石珠宝店:ЭПЛ
2019/10/22 全球购物
印度在线购买电子产品网站:Croma
2020/01/02 全球购物
Wolford法国官网:奥地利奢侈内衣品牌
2020/08/11 全球购物
学术会议邀请函范文
2014/01/22 职场文书
团日活动总结书
2014/05/08 职场文书
基层干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
武侯祠导游词
2015/02/04 职场文书
感恩教师主题班会
2015/08/12 职场文书
2016年优秀团员事迹材料
2016/02/25 职场文书
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python