Vue中如何实现JSON数据格式化与高亮显示

文
章
目
录

• 一、仅保留格式的显示方法
• 二、保留格式且高亮显示的方法
• （一）组件功能介绍
• （二）安装与引入
• （三）常用属性介绍
• （四）使用示例

Vue项目中，常常需要展示JSON数据。如果直接展示原始数据，不仅格式混乱，还难以阅读。接下来，就给大家分享在Vue里格式化显示JSON数据，甚至实现高亮显示的方法。

一、仅保留格式的显示方法

在处理JSON数据展示时，若只要求保留数据格式，不做其他处理，原始数据看起来可能是这样：

{\'action\':\'查询检验报告\', \'xepoType\':\'血常规\'}

在Vue中，可通过以下代码实现格式化显示：

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

这里使用了JSON.stringify方法，它的作用是将data（假设data是包含JSON数据的对象，比如currentRow.operationDetails ）转换为JSON字符串。第二个参数null表示不使用任何替换函数，保持数据原样转换。第三个参数2则是设置缩进为2个空格，这样生成的JSON字符串会有合理的缩进，更方便阅读。而<pre>标签的作用是保留文本中的空格、换行符等格式，确保在页面上显示的内容和转换后的格式一致。效果类似如下：

{
  \'action\':\'查询检验报告\',
   \'xepoType\':\'血常规\'
}

二、保留格式且高亮显示的方法

如果想要实现JSON数据保留格式并且高亮显示，vue3-json-viewer组件能帮上大忙（vue-json-viewer适配Vue2，vue3-json-viewer适配Vue3 ）。下面来详细了解它。

（一）组件功能介绍

1. 格式化显示：这个组件能自动对JSON数据进行格式化处理，添加合适的缩进和换行，让数据结构一目了然。
2. 可折叠/展开：支持点击操作来展开或折叠JSON对象和数组，方便查看嵌套较深的数据结构。
3. 高亮显示：它会用不同颜色区分字符串、数字、布尔值等不同的数据类型，大大提高了数据的可读性。
4. 复制功能：组件提供了复制按钮，方便用户复制JSON数据。
5. 主题支持：有多种主题可供选择，可以根据项目整体风格来挑选合适的主题。
6. 自定义配置：能自定义显示深度、是否显示根节点等参数，满足不同的展示需求。

（二）安装与引入

1. 安装：使用yarn进行安装，在命令行输入：

yarn add vue3-json-viewer

2. 引入：在项目的JavaScript文件中，添加以下代码引入组件和样式：

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

（三）常用属性介绍

1. value：用于指定要显示的JSON数据，数据类型是any。比如：

<JsonViewer :value=\"data\" />

2. expand-depth：表示初始展开的层级深度，类型为number，默认值是1。可以根据需求调整，像这样：

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

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

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

4. boxed：控制是否显示带有边框的JSON数据，类型是boolean，默认值为false。使用方式如下：

<JsonViewer :value=\"data\" boxed />

5. highlight-mouseover-node：当鼠标悬停在节点上时，是否高亮显示该节点，类型为boolean，默认值是false。代码示例：

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

6. sort：设置是否以预览模式显示JSON数据，在这种模式下不显示展开/折叠按钮，类型为boolean，默认值是false。例如：

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

7. show-array-index：决定是否显示数组的索引，类型为boolean，默认值是true。可按需修改：

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

8. show-length：控制是否显示数组和对象的长度，类型为boolean，默认值是true。示例：

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

9. show-line-number：用于设置是否显示行号，类型为boolean，默认值是false。使用方法：

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

10. expanded：设置是否默认展开所有节点，类型为boolean，默认值是false。如：

<JsonViewer :value=\"data\" expanded />

（四）使用示例

假设有这样两组需要对比显示的JSON数据：


在Vue中，可以通过以下代码实现对比展示：

<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>

通过上述方法，就像在vue中实现JSON数据清晰、直观、高亮的格式化显示。