当前位置： 移动技术网 > IT编程>脚本编程>vue.js > 利用Vue2.x开发实现JSON树的方法

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

2018年02月03日  | 移动技术网IT编程  | 我要评论

公明新天地人才市场,猴王五九主题曲,吉他谱

前言

最近工作中遇到一个需求，由于项目需要一个解析 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 事件，用于获取特定节点的树数据，而孩子的数据，则通过递归机制不断向上一层级传递，类似于“冒泡机制”。

总结

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

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网