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

前言

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

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

字符串数据美化功能：

特定层级数据抓取功能：

<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 事件，用于获取特定节点的树数据，而孩子的数据，则通过递归机制不断向上一层级传递，类似于“冒泡机制”。

总结

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

您可能感兴趣的文章:

  • vue.js学习笔记:如何加载本地json文件
  • 详解通过JSON数据使用VUE.JS
赞 (0)

相关推荐

  • vue.js学习笔记:如何加载本地json文件

    vue.js学习笔记:如何加载本地json文件

    在项目开发的过程中,因为无法和后台的数据做交互,所以我们可以自建一个假数据文件(如data.json)到项目文件夹中,这样我们就可以模仿后台的数据进行开发.但是,如何在一个vue.js 项目中引入本地的json文件呢,下面就将步骤贴出来.(此时项目是由webpack打包而成). 整个项目是由webpack打包而成.具体项目结构如下: 1:打包好的文件在此,http://pan.baidu.com/s/1dFCAzux 2:我们找到bulid>dev-server.js,然后打开 3:在里面加入这

  • 详解通过JSON数据使用VUE.JS

    最近接到一个比较简单的项目,不准备使用数据库,打算用JSON数据就可以了.结合当前火热的VUE.JS进行数据渲染. 尽管不打算使用数据库,可是一般的操作增删查改依旧是少不了的.如果使用到数据库的话,不妨做一个API出来,那么网站.APP等都可以依照这个进行操作.在这篇文章里面,我们只是打算简单的引用而已. 下面先来看看我的JSON文件,这里是一个类别文档Category.json: { "msg": "ok", "data":[ { "

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

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

    前言 最近工作中遇到一个需求,由于项目需要一个解析 JSON 字符串并生成 JSON 树的功能,在 GitHub 上也没有找到合适的组件,因此基于 Vue2.X 自己写了一个 JSON 树组件,主要原理是利用 Vue 的递归组件,进行深度优先的先序遍历.该组件不仅可以将一段不可读的 JSON 字符串转化为可读的树形结构,同时可用于抓取某一子树的数据. Github源码 Github-Page 组件在它的模板内可以递归地调用自己.不过,只有当它有 name 选项时才可以这么做 字符串数据美化功能:

  • 利用java+mysql递归实现拼接树形JSON列表的方法示例

    前言 本文给大家介绍的是关于利用java+mysql递归实现拼接树形JSON列表的相关内容,分享出来供大家参考学习,话不多说,来一起看看详细的介绍: 我们在做Java web项目时,前端控件例如国家-省-市-区-县等树形列表,常常需要多级树形json数据 例如: [ { "name": "商品目录", "pid": "-1", "id": "1", "children"

  • Android利用Gson解析嵌套多层的Json的简单方法

    首先先讲一个比较简单点的例子(最简单的我就不讲啦,网上很多),帮助新手理解Gson的使用方法: 比如我们要解析一个下面这种的Json: String json = {"a":"100", "b":[{"b1":"b_value1","b2":"b_value2"}, {"b1":"b_value1","b2"

  • 利用HBuilder打包前端开发webapp为apk的方法

    利用HBuilder打包前端开发webapp为apk的方法

    现在的前端开发可谓是,百花齐放啦,什么都可以做,只有想不到没有做不到的,今天就简单的介绍用vue,ng或者是react开发的单页应用如何打包为apk,在移动设备上运行. 这里以vue为例,其他的差不多,大家可以根据自己的情况去查找相应资料. 第一步,需要安装node,如果是做前端的er,这个应该就不用过多介绍了. 第二步,使用vue-cli工具初始化vue项目,这里只是做一个测试的项目,所以vue-router等东西就不用安装了,实际项目,根据具体情况而论. 第三步,常规的开发,比如希望实现的功

  • Vue中使用JsonView来展示Json树的实例代码

    前两天干活儿有个需求,在前端需要展示可折叠的Json树,供开发人员查看,这里采用JsonView组件来实现,它是一款用于展示Json的Vue组件,支持大体积的Json文件快速解析渲染,下面记录一下实现过程. 1.首先先下载好JsonView的组件:JsonView.vue,组件代码如下: <template> <div class="bgView"> <div :class="['json-view', length ? 'closeable'

  • 如何利用JAVA正则表达式轻松替换JSON中的大字段

    (一)背景 在软件开发工作中我们经常用JSON来传输数据,根据业务需要不免会在JSON数据中传输比较大的数据,有时传输一个图片数据会达到几百K或者几M,而这些大字段数据在记录日志时,不论是文件日志还是数据库日志,都会造成大量的IO处理,使接口的响应速度大幅下降,同时会增加服务的负载,降低系统的性能.这时我们可以选择不输出这个JSON数据,但往往这样会造成更大的问题,因此我们会想如果只不输出大字段数据,而其他数据正常输出就好了,但从技术上往往不易实现.本文就是给大家提供一种方法,利用JAVA的正则

  • 利用node.js开发cli的完整步骤

    CLI介绍 命令行界面(英语:command-line interface,缩写:CLI),是在图形用户界面得到普及之前使用最为广泛的用户界面,它通常不支持鼠标,用户通过键盘输入指令,计算机接收到指令后,予以执行. 目前前端开发中,CLI是常用的工具.前端三大框架Vue.React.Angular都有对应的CLI,包括现在最流行的前端工程化的打包工具Webpack,也有对应的webpack-cli. 在现代的前端开发中,CLI提高了开发的效率.让相应的前端开发者免去了大量的重复性操作,节省了大量

  • JavaScript解析任意形式的json树型结构展示

    在页面展示json成树形结构时,往往得到的json不是ztree的规范格式,需要对json循环迭代解析.即使不规范的json也可以树形展现: var arrayJsonContent=[]; //节点类 var JsonNodes = { id:"", name:"", pId:"", content:"", //location:"", linklocation:"", open:fa

  • Python利用IPython提高开发效率

    Python利用IPython提高开发效率

    一.IPython 简介 IPython 是一个交互式的 Python 解释器,而且它更加高效. 它和大多传统工作模式(编辑 -> 编译 -> 运行)不同的是, 它采用的工作模式是:执行 -> 探索 ,而大部分和数据分析相关的代 码都含有探索式操作(比如试误法和迭代法),所以 IPython 能大大提高编码效率. IPython 发展到现在,它不仅仅只是一个加强版的 Python shell 了, 它集成了 GUI 控制台,这可以让你直接进行绘图操作:它还有一个基于 Web 的交互式笔记

  • vue2.0开发入门笔记之.vue文件的生成和使用

    vue2.0开发入门笔记之.vue文件的生成和使用

    这几天新项目用vue2.0开发,由于之前没用过vue,拿到项目框架看到都是.vue文件, 不知道怎么用,以下是关于.vue文件的发现: 1.一个.vue文件是一个封装的组件,在.vue文件里可以写 html, css, js 其中template 中写html 代码,其实就是定义模板. 2.各个.vue之间样式不是独立的,同一选择器在不同的.vue里只要满足选中的条件就可以起作用.比如我在箭头1指的文件里定义了样式 .box{ width:200px; },如果在箭头2指的文件里也有 .box,

随机推荐