利用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 相关文章推荐
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
Mar 23 Javascript
js截取函数(indexOf,join等)
Sep 01 Javascript
Javascript基础知识(二)事件
Sep 29 Javascript
js实现进度条的方法
Feb 13 Javascript
jQuery插件datepicker 日期连续选择
Jun 12 Javascript
JavaScript Length 属性的总结
Nov 02 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
Jul 12 Javascript
JS实现多物体运动的方法详解
Jan 23 Javascript
实现高性能javascript的注意事项
May 27 Javascript
JavaScript进阶(一)变量声明提升实例分析
May 09 Javascript
JavaScript使用prototype属性实现继承操作示例
May 22 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
Jul 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
PHP令牌 Token改进版
2008/07/18 PHP
一个简单的php加密解密函数(动态加密)
2013/06/19 PHP
PHP大批量插入数据库的3种方法和速度对比
2014/07/08 PHP
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
验证坐标在某坐标区域内php代码
2016/10/08 PHP
php实现银联商务公众号+服务窗支付的示例代码
2019/10/12 PHP
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
2008/03/22 Javascript
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
2012/01/15 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
2013/08/12 Javascript
html文档中的location对象属性理解及常见的用法
2014/08/13 Javascript
jquery插件bxslider用法实例分析
2015/04/16 Javascript
详解javascript传统方法实现异步校验
2016/01/22 Javascript
ComboBox(下拉列表框)通过url加载调用远程数据的方法
2017/08/06 Javascript
vue axios整合使用全攻略
2018/05/24 Javascript
Vue项目引发的「过滤器」使用教程
2019/03/12 Javascript
Vue指令实现OutClick的示例
2020/11/16 Javascript
[57:18]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#3VP VS VG
2016/03/03 DOTA
python去掉字符串中重复字符的方法
2014/02/27 Python
PHP魔术方法__ISSET、__UNSET使用实例
2014/11/25 Python
Python Property属性的2种用法
2015/06/21 Python
Python使用pygame模块编写俄罗斯方块游戏的代码实例
2015/12/08 Python
python根据用户需求输入想爬取的内容及页数爬取图片方法详解
2020/08/03 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
澳大利亚体育和露营装备在线/实体零售商:Find Sports
2020/06/03 全球购物
2013年员工自我评价范文
2013/12/27 职场文书
黄河象教学反思
2014/02/10 职场文书
六一节目主持词
2014/04/01 职场文书
书法兴趣小组活动总结
2014/07/07 职场文书
四风问题个人对照检查材料
2014/09/26 职场文书
单位委托书格式范本
2014/09/29 职场文书
流动人口婚育证明
2014/10/19 职场文书
敬老院志愿者活动总结
2015/05/06 职场文书
使用pandas生成/读取csv文件的方法实例
2021/07/09 Python
Nginx+Tomcat负载均衡多实例详解
2022/04/11 Servers
Tomcat starup.bat 脚本实现开机自启动
2022/04/20 Servers
详细介绍Next.js脚手架完整搭建封装
2022/04/26 Javascript