利用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 UrlDecode函数代码
Jan 09 Javascript
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
Apr 02 Javascript
上传的js验证(图片/文件的扩展名)
Apr 25 Javascript
JS简单实现登陆验证附效果图
Nov 19 Javascript
js修改原型的属性使用介绍
Jan 26 Javascript
浅谈javascript中call()、apply()、bind()的用法
Apr 20 Javascript
php利用curl获取远程图片实现方法
Oct 26 Javascript
Listloading.js移动端上拉下拉刷新组件
Aug 04 Javascript
简易Vue评论框架的实现(父组件的实现)
Jan 08 Javascript
JointJS流程图的绘制方法
Dec 03 Javascript
使用puppeteer爬取网站并抓出404无效链接
Dec 20 Javascript
记一次vue跨域的解决
Oct 21 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维护文件系统
2006/10/09 PHP
非常好用的两个PHP函数 serialize()和unserialize()
2012/02/04 PHP
PHP新手用的Insert和Update语句构造类
2012/03/31 PHP
使用php测试硬盘写入速度示例
2014/01/27 PHP
新浪SAE云平台下使用codeigniter的数据库配置
2014/06/12 PHP
php switch语句多个值匹配同一代码块应用示例
2014/07/29 PHP
PDO::rollBack讲解
2019/01/29 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
PHP7 整型处理机制修改
2021/03/09 PHP
新老版本juqery获取radio对象的方法
2010/03/01 Javascript
JS验证身份证有效性示例
2013/10/11 Javascript
javascript手工制作悬浮菜单
2015/02/12 Javascript
在Node.js中使用HTTP上传文件的方法
2015/06/23 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
2016/03/17 Javascript
微信小程序 form组件详解
2016/10/25 Javascript
微信小程序 欢迎界面开发的实例详解
2016/11/30 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
BootStrap表单控件之文本域textarea
2017/05/23 Javascript
解决vue处理axios post请求传参的问题
2018/03/05 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
2018/08/10 Javascript
JavaScript工具库之Lodash详解
2019/06/15 Javascript
js实现图片无缝循环轮播
2019/10/28 Javascript
微信小程序自定义头部导航栏(组件化)
2019/11/15 Javascript
js判断密码强度的方法
2020/03/18 Javascript
python中for语句简单遍历数据的方法
2015/05/07 Python
将Python的Django框架与认证系统整合的方法
2015/07/24 Python
Python pass详细介绍及实例代码
2016/11/24 Python
django请求返回不同的类型图片json,xml,html的实例
2018/05/22 Python
python flask实现分页的示例代码
2018/08/02 Python
Python模块相关知识点小结
2020/03/09 Python
研究生自我鉴定范文
2013/10/30 职场文书
我们的节日清明节活动方案
2014/03/05 职场文书
中国梦读书活动总结
2014/07/10 职场文书
幼师辞职信范文
2015/02/27 职场文书
筑梦中国心得体会
2016/01/18 职场文书
详解nginx location指令
2022/01/18 Servers