最近项目上有个需求，就是在前端显示json格式的数据，并且提供展开和收起的按钮。先看一下最终完成的效果吧。

在这里我使用了vue-json-viewer这个组件来实现这个效果。这个组件主要能实现高亮、json折叠和copy功能，能满足项目需求。

一、安装

npm install vue-json-viewer --save

二、引入并注册

import JsonViewer from 'vue-json-viewer'
Vue.use(JsonViewer)

三、使用

<json-viewer 
:value="jsonData" 
:expand-depth="5" 
copyable 
boxed 
sort 
:expanded="expanded" 
:key="expanded">
</json-viewer>

参数说明：

expanded 为默认是否展开，默认值为false。

注意：如果得到的是string类型的json数据，需要使用JSON.parse(content)将其转化为josn格式。

四、增加展开收起按钮

这个组件自带展开收起功能，但是按钮太小，并且不明显，所以增加一个展开收起按钮。

<a-button type="primary" @click="toggleExpanded">{{expanded ? '收起' : '展开'}}</a-button>

  data() {
    return {
      visible: false,
      jsonData: {},
      expanded: false
    }
  },

当切换展开/收起按钮时，更改expanded的值，false表示josn数据为收起状态，true表示展开状态。

    toggleExpanded() {
      this.expanded = !this.expanded
    }

当expanded的值发生改变时，需要重新渲染组件。所以为组件添加key,值为expanded。