Vue实现JSON数据可视化的两种组件实战解析

# Vue 3
npm install vue-json-pretty --save

# Vue 2
npm install vue-json-pretty@v1-latest --save

<template>
  <vue-json-pretty :data="apiResponse" />
</template>

<script>
import VueJsonPretty from 'vue-json-pretty'
import 'vue-json-pretty/lib/styles.css'

export default {
  components: { VueJsonPretty },
  data() {
    return {
      apiResponse: {
        user: { name: '张三', id: 123 },
        status: 'active',
        permissions: ['read', 'write']
      }
    }
  }
}
</script>

<vue-json-pretty
  :data="configData"
  :editable="true"
  @data-change="handleConfigUpdate"
/>

<vue-json-pretty
  :data="largeDataset"
  :virtual="true"
  :item-height="24"
/>

<vue-json-pretty
  :data="complexData"
  :show-length="true"
  :show-line="true"
  :deep="3"
  :highlight-selected="true"
  :custom-value="renderTimestamp"
/>

<template>
  <div class="api-debugger">
    <div class="request-panel">
      <h4>请求参数</h4>
      <vue-json-pretty :data="requestParams" :deep="2" />
    </div>
    <div class="response-panel">
      <h4>响应数据</h4>
      <vue-json-pretty 
        :data="responseData"
        :highlight-selected="true"
        @node-click="copyNodeValue"
      />
    </div>
  </div>
</template>

# Vue 2
npm install vue-json-viewer@2 --save

# Vue 3  
npm install vue-json-viewer@3 --save

<template>
  <json-viewer 
    :value="logData"
    :expand-depth="2"
    copyable
    boxed
  />
</template>

<script>
import JsonViewer from 'vue-json-viewer'
import 'vue-json-viewer/style.css'

export default {
  components: { JsonViewer },
  data() {
    return {
      logData: {
        timestamp: Date.now(),
        level: 'error',
        message: '数据库连接失败',
        details: { retryCount: 3 }
      }
    }
  }
}
</script>

<json-viewer :value="data" theme="dark" />

<template>
  <div class="log-viewer">
    <div v-for="(log, index) in filteredLogs" :key="index">
      <div class="log-meta">
        <span class="level-tag">{{ log.level }}</span>
        <span class="time">{{ formatTime(log.timestamp) }}</span>
      </div>
      <json-viewer 
        :value="log.data"
        :expand-depth="log.level === 'error' ? 3 : 1"
        copyable
      />
    </div>
  </div>
</template>

function safeStringify(obj) {
  const cache = new Set()
  return JSON.stringify(obj, (key, value) => {
    if (typeof value === 'object' && value !== null) {
      if (cache.has(value)) return '[Circular]'
      cache.add(value)
    }
    return value
  })
}

::v-deep .vjs-tree {
  font-family: 'Monaco', 'Menlo', monospace;
  font-size: 13px;
}