vue 格式化显示 json 数据（高亮显示）

第一种：只要求保留格式

不做任何处理的原始数据

代码

<span>{{data}}</span>

格式化显示

代码

<pre>{{ JSON.stringify(data, null, 2) }}</pre>

解释：

• JSON.stringify 方法将 currentRow.operationDetails 对象转换为 JSON 字符串。
• 第二个参数 null 表示不使用任何替换函数。
• 第三个参数 2 表示缩进为 2 个空格，使 JSON 字符串更易读。
• <pre> 标签会保留文本中的空格、换行符和其他格式，使其在页面上显示时与原始文本格式一致。

第二种：保留格式，高亮显示

vue3-json-viewer 组件

vue-json-viewer 适配 vue2, vue3-json-viewer 适配 vue3。

功能

1. 格式化显示:

   • 自动格式化 JSON 数据，使其具有良好的缩进和换行，便于阅读。

2. 可折叠/展开:

   • 支持点击展开或折叠 JSON 对象和数组，方便查看嵌套结构。

3. 高亮显示:

   • 使用不同的颜色高亮显示不同的数据类型（如字符串、数字、布尔值等），提高可读性。

4. 复制功能:

   • 提供复制按钮，方便用户复制 JSON 数据。

5. 主题支持:

   • 支持多种主题，可以根据项目风格进行选择。

6. 自定义配置:

   • 可以自定义显示深度、是否显示根节点等参数。

安装

yarn add vue3-json-viewer

引入

import { JsonViewer } from "vue3-json-viewer";
import "vue3-json-viewer/dist/index.css";

常用属性

value： 要显示的 JSON 数据，类型 any。

<JsonViewer :value="data" />

expand-depth： 初始展开的层级深度，类型 number，默认值: 1。

<JsonViewer :value="data" :expand-depth="3" />

copyable： 是否允许复制 JSON 数据，可以传入一个配置对象来自定义复制行为，类型: boolean | CopyConfig，默认值: false。

<JsonViewer :value="data" copyable />
<!-- 或者 -->
<JsonViewer :value="data" :copyable="{ copyText: '复制', copiedText: '已复制' }" />

boxed： 是否显示带有边框的 JSON 数据，类型: boolean，默认值: false。

<JsonViewer :value="data" boxed />

highlight-mouseover-node： 当鼠标悬停在节点上时是否高亮显示，类型: boolean，默认值: false。

<JsonViewer :value="data" highlight-mouseover-node />

sort： 是否以预览模式显示 JSON 数据，不显示展开/折叠按钮，类型: boolean，默认值: false。

<JsonViewer :value="data" preview-mode />

show-array-index： 是否显示数组的索引，类型: boolean，默认值: true。

<JsonViewer :value="data" :show-array-index="false" />

show-length： 是否显示数组和对象的长度，类型: boolean，默认值: true。

<JsonViewer :value="data" :show-length="false" />

show-line-number： 是否显示行号，类型: boolean，默认值: false。

<JsonViewer :value="data" show-line-number />

expanded： 是否默认展开所有节点，类型: boolean，默认值: false。

<JsonViewer :value="data" expanded />

使用示例

<el-row :gutter="20">
  <el-col :span="12">
    <div class="compare-title">变更前</div>
    <JsonViewer
      :value="beforeData"
      :expand-depth="3"
      copyable
      boxed
    />
  </el-col>
  <el-col :span="12">
    <div class="compare-title">变更后</div>
    <JsonViewer
      :value="afterData"
      :expand-depth="3"
      copyable
      boxed
    />
  </el-col>
</el-row>