Vue中使用JsonView进行JSON数据展示

前言

  最近在开发公司的管理系统的操作日志模块，要查看某条操作日志的请求参数，要将请求的参数以 JSON 格式的形式展示出来，于是用到了Vue-JSON-Viewer 这个插件。

一、Vue-JSON-Viewer 基础入门

插件简介

  Vue-JSON-Viewer 是一个用于在Vue项目中展示JSON数据的组件，它解决了在项目开发中面临的展示JSON数据的需求，尤其是当JSON文件体积较大时，也可以快速渲染。用官方的话来说，就是一个专为 Vue.js 框架设计的简单 JSON 查看器组件，兼容 Vue.js 2.x 及 3.x，并支持服务器端渲染（SSR）。此项目由 JavaScript 编写，采用 MIT 许可证分发，是处理和展示 JSON 数据的理想选择，尤其是对于那些需要以可视化方式查看复杂数据结构的开发者来说。

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

安装插件

  安装插件时，可能会遇到因 Vue 版本不匹配导致的安装或运行错误，确保你的 Vue 项目版本与 Vue-JSON-Viewer 的分支相匹配。本文基于 npm 的安装 Vue-JSON-Viewer 插件，执行命令如下：

# 对于 Vue 2.x
npm install vue-json-viewer@2 --save

# 对于 Vue 3.x
npm install vue-json-viewer@3 --save

【注意】如果npm安装报错，可换成 cnpm 安装。

引入插件

  安装完成后，在项目入口文件中正确引入并注册该组件。引入插件有两种方式，可以全局引入，也可以在单个页面文件中引入该插件。如果在全局 main.js 中引入，那么全局可用，无需在单独页面中引入，可直接调用组件。如果在单页面中使用，则需要引入，才可正常使用。代码如下：

import Vue from 'vue';
import JsonViewer from 'vue-json-viewer';

// 非全局的不用写这个，直接在组件中使用标签引入
Vue.use(JsonViewer) 

使用插件

  初次使用者可能不知道如何正确地将数据传递给 Vue-JSON-Viewer 组件，或者遇到数据更新组件未响应的情况。我们可以使用 :value 属性来绑定 JSON 数据，如下所示：

<script setup lang="ts">