Vue | 一个支持数据抓取的JSON树组件

一个将 JSON 字符串渲染成树形结构的 Vue2.x 组件，主要原理是利用 Vue 的递归组件，进行深度优先的先序遍历。不仅可以将一段不可读的 JSON 字符串转化为可读的树形结构，同时可用于抓取某一子树的数据。

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

• 基础功能: JSON 的美化
• 高级功能: 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"
  :current-deep="currentDeep"
  @click="handleItemClick">
</tree>
复制代码

通过 parent-data 传入父亲的数据，data 传入孩子的数据，当子树的数据是简单类型时，不再进入递归，同时该组件提供了一个 click 事件，用于获取特定节点的树数据，而孩子的数据，则通过递归机制不断向上一层级传递，类似于“冒泡机制”。

属性

• 若仅使用基础功能(JSON美化)，只需关注功能级别为 基础 的属性。
• 若使用高级功能(数据层级的获取)，需关注 基础 与 高级 的属性。

属性	级别	说明	类型	默认值
data	基础	待美化的源数据，注意不是 JSON 字符串	JSON 对象	-
deep	基础	数据深度, 大于该深度的数据将不被展开	number	Infinity
path	高级	定义最顶层数据层级	string	root
pathChecked	高级	定义哪些数据层级是已被选中的	array	[]
pathSelectable	高级	定义哪些数据层级是可以被选中的	Function(itemPath, itemData)	-
selectableType	高级	定义组件支持的选中方式，默认无选中功能	enum: both, checkbox, tree	-

事件

• 若使用高级功能，下列事件才是有效的。

事件名	说明	回调参数
click	点击某一个数据层级时触发的事件	(path, data)

类似项目对比

vue-json-tree-view	react-json-tree	pretty-json
基于 Vue ，但样式与 JSON 代码区别较大	基于 React	基于 JQuery + Bootstrap ，样式与本项目最接近

项目地址

• 项目地址
• 项目预览

转载于:https://juejin.im/post/5a73cec65188257a89298064