利用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 相关文章推荐
JS下高效拼装字符串的几种方法比较与测试代码
Apr 15 Javascript
js中字符替换函数String.replace()使用技巧
Aug 14 Javascript
css transform 3D幻灯片特效实现步骤解读
Mar 27 Javascript
JavaScript 32位整型无符号操作示例
Dec 08 Javascript
js实现div的切换特效上一个下一个
Feb 11 Javascript
node.js中的http.get方法使用说明
Dec 14 Javascript
jQuery插件slider实现拖动滑块选取价格范围
Apr 30 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
Jul 21 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
Jun 04 Javascript
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
Vue中添加手机验证码组件功能操作方法
Dec 07 Javascript
Express之托管静态文件的方法
Jun 01 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函数in_array()使用详解
2014/08/20 PHP
CodeIgniter使用smtp服务发送html邮件的方法
2015/06/10 PHP
php链表用法实例分析
2015/07/09 PHP
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
2008/09/26 Javascript
下载文件个别浏览器文件名乱码解决办法
2013/03/19 Javascript
利用JS进行图片的切换即特效展示图片
2013/12/03 Javascript
用js控制组织结构图可以任意拖拽到指定位置
2014/01/17 Javascript
JavaScript立即执行函数的三种不同写法
2014/09/05 Javascript
纯JS实现可拖拽表单的简单实例
2016/09/02 Javascript
chrome浏览器如何断点调试异步加载的JS
2016/09/05 Javascript
简单理解js的prototype属性及使用
2016/12/07 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
2017/11/08 jQuery
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
2019/02/21 Javascript
vue 插件的方法代码详解
2019/06/06 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
2020/02/14 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
2020/07/11 Javascript
typescript配置alias的详细步骤
2020/08/12 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
2020/08/19 Javascript
javascript前端实现多视频上传
2020/12/13 Javascript
用Python实现一个简单的能够上传下载的HTTP服务器
2015/05/05 Python
python正则表达式匹配[]中间为任意字符的实例
2018/12/25 Python
基于python的socket实现单机五子棋到双人对战
2020/03/24 Python
解决TensorFlow调用Keras库函数存在的问题
2020/07/06 Python
Python 防止死锁的方法
2020/07/29 Python
初探CSS3中的calc()功能
2015/07/14 HTML / CSS
印度和世界各地的精美产品:Ikka Dukka
2018/02/12 全球购物
施华洛世奇加拿大官网:SWAROVSKI加拿大
2018/06/03 全球购物
自主招生自荐信格式
2013/12/03 职场文书
开业庆典邀请函
2014/01/08 职场文书
机械制造专业毕业生求职信
2014/03/02 职场文书
企业安全生产演讲稿
2014/05/09 职场文书
2014年巴西世界杯口号
2014/06/05 职场文书
教师一帮一活动总结
2014/07/08 职场文书
食品质量与安全专业毕业生求职信
2014/08/11 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
Nginx设置日志打印post请求参数的方法
2021/03/31 Servers