Vue实现JSON格式数据预览 插件 vue-json-viewer

npm install vue-json-viewer -S

<template>
  <div>
    <div class="center"
         v-loading="loading">
      <JsonViewer :value="jsonData"
                  :expand-depth="3" />
     <!--:expand-depth="3" 代表向下展开的深度  -->
    </div>
  </div>
</template>
<script>
import JsonViewer from 'vue-json-viewer'

export default {
  name: 'JsonDialog',
  components: {
    JsonViewer,
  },
  data() {
    return {
      jsonData: null,
      loading: false,
      dataList: {
        error: 'Not Found',
        message: 'No message available',
        path: '/fu/',
        status: 404,
        timestamp: '2022-01-06T03:13:28.473+0000',
      },
    }
  },
  created() {
    this.funnelMetricSingle()
  },
  methods: {
    async funnelMetricSingle() {
      this.loading = true
      this.jsonData = this.dataList
      this.loading = false
    },
  },
}
</script>

<style scoped>
.center {
  max-height: 600px;
  overflow-y: auto;
  border: 1px solid #ccc;
}
</style>

结果展示

 vue-json-viewer  官网： https://www.npmjs.com/package/vue-json-viewer