脚本宝典收集整理的这篇文章主要介绍了基于Vue2.x开发的JSON树，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

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

• Github源码
• Github-Page

组件在它的模板内可以递归地调用自己。不过，只有当它有 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 事件，用于获取特定节点的树数据，而孩子的数据，则通过递归机制不断向上一层级传递，类似于“冒泡机制”。

脚本宝典总结

以上是脚本宝典为你收集整理的基于Vue2.x开发的JSON树全部内容，希望文章能够帮你解决基于Vue2.x开发的JSON树所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。