vue json数据可视化展示

使用vue-json-viewer插件
官网地址：https://www.npmjs.com/package/vue-json-viewer

1. 安装vue-json-viewer插件
   npm install vue-json-viewer --save

2. script里面导入包，定义jsonData，为它赋值，或是接收后端接口数据

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

   data() {
   return {
     jsonData: {
       id: '5968fcad629fa84ab65a5247',
       firstname: 'Ada',
       lastname: 'Lovelace',
       awards: null,
       known: [
         'mathematics',
         'computing'
       ],
       position: {
         lat: 44.563836,
         lng: 6.495139
       },
       description: `Augusta Ada King, Countess of Lovelace (née Byron; 10 December 1815 – 27 November 1852) was an English mathematician and writer,
           chiefly known for her work on Charles Babbage's proposed mechanical general-purpose computer,
           the Analytical Engine. She was the first to recognise that the machine had applications beyond pure calculation,
           and published the first algorithm intended to be carried out by such a machine.
           As a result, she is sometimes regarded as the first to recognise the full potential of a "computing machine" and the first computer programmer.`,
       bornAt: '1815-12-10T00:00:00.000Z',
       diedAt: '1852-11-27T00:00:00.000Z'
     }
    }
   }
   

3. 使用

   <json-viewer :value="jsonData" copyable boxed></json-viewer>
   

4. 结果