一个将 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 ，样式与本项目最接近 |
项目地址
- 项目地址
- 项目预览