vue项目实现展示json树结构

最新推荐文章于 2024-06-20 14:06:47 发布
最新推荐文章于 2024-06-20 14:06:47 发布
阅读量854 收藏 4
点赞数
分类专栏： Vue2.x 前端插件安装和使用 Css/Canvas/SVG/Elementui 文章标签： json vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Amnesiac666/article/details/120220635
版权
本文介绍了如何使用vue-json-viewer插件在Vue项目中以高亮、可折叠和可复制的形式展示JSON数据。通过npm安装并引入到main.js中，然后在模板中使用组件，可以轻松实现JSON数据的美化展示，并提供了expand-depth、copyable和boxed等选项来定制功能。此外，还展示了如何自定义copyable行为。
摘要由CSDN通过智能技术生成

效果：
在这里插入图片描述
将string类型的json字符串，以json格式展示
利用vue-json-viewer插件，利用这个插件，可方便快速实现 高亮，JSON折叠，copy 三种功能 ！！！

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

安装vue-json-viewer插件

基于npm的安装：

npm install vue-json-viewer --save

使用

在main.js写：

import Vue from 'vue'
import JsonViewer from 'vue-json-viewer'
 
Vue.use(JsonViewer)

在template里面加入如下一种： 其中jsonData必须是json类型的数据。


<json-viewer :value="jsonData"></json-viewer>
 
<hr />
 
<json-viewer
  :value="jsonData"
  :expand-depth=5
  copyable
  boxed
  sort></json-viewer>

如何自定义copyable？

在这里插入图片描述
在这里插入图片描述
效果：
在这里插入图片描述

公孙元二
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 循环遍历多层json_vue将ajax返回的json数据循环遍历到html页面上
weixin_39945915的博客
02-11 965
前提1、下载开发版本的vue.js，这样可以看到报什么错误，生产版本是不报错误的2、ajax作为第三方接口，可以返回后台的数据要点vue只要在script里面实例化一次就可以了以下是本人开发项目实践成功的代码js部分讲解实例化vue,var ap=new Vue({el: '#allpost',data: {sites:[]},});以上知识点讲解1、el:"#allpost"对应html页面的i...
Vue.js中的JSON数据可视化利器: Vue-Json-Tree-View
gitblog_00011的博客
04-18 815
Vue.js中的JSON数据可视化利器: Vue-Json-Tree-View 项目地址:https://gitcode.com/fitzhavey/vue-json-tree-view 在前端开发中，处理和展示JSON数据是一项常见的任务，尤其是在调试、API接口交互或者数据展示时。Vue-Json-Tree-View是一个优秀的Vue组件，它能够优雅地将复杂的JSON数据以可读性强的树形结构显...
vue中用JSON格式查看数据（vue-json-viewer）
最新发布
Ninewu的博客
06-20 745
vue中把string用JSON格式展示数据。
vue插件 JSON 数据树形展示插件
YuShiYue的博客
01-02 3206
vue-json-pretty 文档 https://github.com/leezng/vue-json-pretty/blob/HEAD/README.zh-CN.md https://www.npmjs.com/package/vue-json-pretty vue-json-viewer 文档 https://github.com/chenfengjw163/vue-json-vie...
在线JSON树查看器工具–教程
06-17 895
我已经开发了一个有用的工具插件，它可以在一个JSON对象和渲染树层次结构中的数据显示。 非常适合寻找大JSON对象节点的路径。 特征 通过上传或者输入您的JSON JSON文件或复制和粘贴。 可扩展的树视图。 哈弗节点，以查看该变量的路径。 点击复制节点的完整路径。 指定自定义分隔符来复制节点路径。 在线JSON树查看器工具 示例创建JSON树呼叫 如果你想创建自己的树，这...
JSON前端展示-JsonTree组件（vue2 + antd）
imoo的笔记
01-11 1775
<template> <div> <a-tree :tree-data="treeData" :default-expand-all="true" /> </div> </template> <script> export default { computed: { treeData() { const result = this.expandObj('详情树', this.jsonData);
利用Vue2.x开发实现JSON树的方法
01-19
最近工作中遇到一个需求，由于项目需要一个解析 JSON 字符串并生成 JSON 树的功能，在 GitHub 上也没有找到合适的组件，因此基于 Vue2.X 自己写了一个 JSON 树组件，主要原理是利用 Vue 的递归组件，进行深度优先的...
vue实现组织机构树
06-14
在Vue.js框架中实现组织机构树是一个常见的需求，主要用于展示公司、部门或项目中的层级关系。Vue的灵活性和组件化特性使得构建这种交互式的树结构变得相对简单。在这个项目中，我们看到几个关键的文件，如`兼容老...
vue-json-pretty：一个易于使用并且支持数据选择的JSON树视图组件
02-03
Vue组件，用于将JSON数据呈现为树结构。 现在，它至少支持Vue3。 如果你还在用Vue2，看到。 English | 产品特点 作为JSON格式化程序。 从JSON获取商品数据。 用具有可预测的静态类型的TypeScript编写。 支持...
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
12-29
数据结构为数组中包含对象–树形结构，用Vue组件的写法实现以下的效果： 树形列表，缩进显示层级，第5级数据加底色，数据样式显色，点击展开折叠数据。本文为用Vue实现方式，另有一篇为用knockout.js的实现方法。 ...
vue-json-editor:Json编辑器视图
04-08
2. **树形视图**：以清晰的树形结构展示JSON数据，方便用户理解和操作。 3. **格式化与验证**：自动格式化JSON数据，保持良好的可读性，并能检测和提示语法错误。 4. **拖放操作**：允许用户通过拖放方式添加、移动...
Json格式化树形显示.zip
08-15
HiJson 是一个 java开发，基于fastjson包，用于格式化json字符，以树的形式展示，方便json字符串查看，支持各种常用操作，支持多标签！
vue使用js将json数据转为树形数据,提供给elementui级联组件
wgd1026的博客
08-02 416
最近遇到一个需求将另一系统的部门数据通过接口获取到本地，并形成树形数据提供给elementui级联组件作为表单中的组件选择用户的部门id。//为了配合组件使用将name改为label。//为了配合组件使用将id改为value。//根节点数据的parentId一般为空或者0。//可以生成多级嵌套的树。
把JSON格式的数据转化为树结构
m0_56856837的博客
11-24 3997
Vue把JSON数据做成树结构 在工作中，我们常常会遇到下面的问题，就是把数据转换成树结构来展示或者处理，这个时候就需要对JSON格式的数据进行转化，话不多说，直接上代码。 <script> getTreeData() { let dataArray = []; this.setTree.forEach((data) => { let parentId = data.parentId; if (parentId ===
json可视化树
IT界中的一枝梅的博客
09-14 1872
1、概要 近期项目需要集成第三方webservice服务，前端界面需要将第三方请求json，返回json的可视化展示。 2、效果 借用第三方插件展示 vue-json-viewer 利用Reflect递归查找赋值 3、数据 请求数据 {"type":"object","properties":{"header":{"type":"object","properties":{"AuthHeader":{"type":"object","properties":{"User":{"description":
vue3 用户管理树结构展示
与海
01-11 219
若依＋elementplue框架
JSON 数据转成树状图展示工具
weixin_39645311的博客
04-22 2815
test
vue显示格式化的json
xcc_2269861428的博客
12-11 2115
如图： 基础代码（此段是将json高亮显示的），另外：此处的传入的json是json对象，不是json字符串 // 格式化json syntaxHighlight(json){ if (typeof json != 'string') { json = JSON.stringify(json, undefined, 2); } json = json.replace(/&/g, '&').rep
vue3 自定义组件，可用列表数据展示，也能树状格式数据展示，带分页器
weixin_52803316的博客
07-01 1170
vue3 自定义组件，可用列表数据展示，也能树状格式数据展示，带分页器
vue树形平面结构及json格式
06-08
Vue树形结构通常使用递归组件的方式来实现。递归组件是指组件内部调用自身，从而形成一个树形结构。以下是一个简单的例子： ```html <template> <ul> <li v-for="item in data" :key="item.id"> {{ item.name }} <tree-view :data="item.children" v-if="item.children" /> </li> </ul> </template> <script> export default { name: 'tree-view', props: { data: { type: Array, required: true } } } </script> ``` 在这个例子中，我们定义了一个`tree-view`组件，它接收一个`data`属性，它是一个数组，表示当前节点的子节点。我们通过`v-for`指令渲染子节点，并且如果子节点存在，就递归调用`tree-view`组件。 至于JSON格式，它是一种轻量级的数据交换格式，常用于前后端数据交互。以下是一个简单的树形JSON格式： ```json { "name": "root", "children": [ { "name": "child1", "children": [ { "name": "grandchild1" }, { "name": "grandchild2" } ] }, { "name": "child2", "children": [ { "name": "grandchild3" } ] } ] } ``` 在这个JSON格式中，每个节点都有一个`name`属性表示节点名称，如果有子节点，就有一个`children`属性表示子节点数组。你可以将这个JSON数据传递给`tree-view`组件的`data`属性，从而渲染出一个树形结构。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值