Vue之使用JsonView来展示Json树

前两天干活儿有个需求，在前端需要展示可折叠的Json树，供开发人员查看，这里采用JsonView组件来实现，它是一款用于展示Json的Vue组件，支持大体积的Json文件快速解析渲染，下面记录一下实现过程。

1.首先先下载好JsonView的组件：JsonView.vue，组件代码如下：

  1 
 41 
 42 
127 
128 

2.在需要使用的vue页面中引用JsonView组件

import JsonView from '@/components/JsonView'

3.定义Json数据变量

jsonData:{},

4.页面展示代码

5.实现效果如下：

 

JsonView Attributes

 

打完收工！