vue项目 按照数据结构去展示数据，包括JSON类型 vue-json-viewer插件

终端 npm安装

npm install vue-json-viewer --save

main.js 入口文件 导入

import JsonViewer from 'vue-json-viewer'   //按照数据的结构去展示
Vue.use(JsonViewer)

就可以直接使用了

 <json-viewer :value="tableData" :expand-depth="2" copyable boxed sort></json-viewer>
 
 tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          obj: {
            date: '2016-05-02',
            name: [{ address: '上海市普陀区金沙江路 1518 弄' }]
          }
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ],

最终效果，:expand-depth="2"展示两层 copyable可复制 boxed类似卡片card