VUE展示JSON格式数据【vue-json-viewer】

一、安装组件vue-json-viewer

npm install vue-json-viewer --save

二、在main.js中引入并使用vue-json-viewer

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

三、在.vue文件中使用vue-json-viewer

<json-viewer :value="obj" ></json-viewer>

其中obj数据如果是JSON格式字符串，要先用JSON.parse()转成对象

<json-viewer
  :value="JSON.parse(alarmInfo.additionalInfo)"
  :expand-depth="5"
  boxed
  sort
></json-viewer>

未格式化效果

JSON格式化后