展示效果

实现

<div class="tab-table"><div style="height: 16px"></div><a-collapse style="border: 0" defaultActiveKey="0" accordion><template #expandIcon="props"><svg-iconstyle="width: 19px; height: 19px":icon-class="props.isActive ? 'docker-up' : 'docker-down'"/></template><a-collapse-panelv-for="(item, index) in searchList.list":key="index"class="titleBox"><template slot="header"><div class="table-inside">{{ item }}</div></template><VueJsonPretty :data="item"></VueJsonPretty></a-collapse-panel></a-collapse>
</div>

vue-json-pretty@1.7.1组件解析展示JSON格式

import VueJsonPretty from 'vue-json-pretty';

.tab-table {margin: 0 16px 15px 16px;overflow-x: auto;white-space: nowrap;
}
.titleBox {background: #f8fbff;border: 1px solid #d6e1f0;margin-bottom: 13px;border-radius: 4px;/deep/.ant-collapse-header {padding: 0 40px;}
}
.table-inside {text-overflow: ellipsis;white-space: nowrap;overflow: hidden;margin: 10px;
}

前端展示json格式数组相关推荐

HTML页面之间传递Json格式数组的方式
HTML页面之间传递Json格式数组的方式如下: a.html localStorage.setItem("userinfoList", JSON.stringify(list) ...
前端传JSON格式数据给后端，将数据封装成JSON格式(@RequestBody注解)
在前端开发过程中,碰到了后端要求前端提供JSON格式数据如图所示,后端使用了@RequestBody注解. @RequestBody的作用其实是将json格式的数据转为java对象因此需要我们前端 ...
html中如何美化展示json格式数据
本篇文章给大家介绍 html中美化展示json格式数据的方式.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 直接上代码: html中主要加一个pre 的标签 <h2>G ...
前端传输JSON格式数据居然尾随了一个等于号...
问题: 项目中前端传JSON数据到后端接口时数据尾部多了一个等于号解决办法: 前端设置请求体类型以及数据格式后端也要指定接受数据的格式在写前后端接口的时候,我的前端将表单的数据封装 ...
前端学习——JSON格式详解
0.前言 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. 易于人阅读和编写.同时也易于机器解析和生成. 它基于JavaScript Programmin ...
Vue-json-viewer 展示JSON格式数据
最近在开发一个公司的投放管理系统的操作日志模块,要查看某条操作日志的请求参数,要将请求的参数以JSON格式的形式展示出来,于是用到了vue-json-viewer这个插件. 以下是实现的效果: 插件的 ...
js 前端实现将json格式数组下载到excel(xls、xlsx、csv)表格里
项目需求:上传文件时如果有错误信息,则上传不成功,需要提示用户下载查看错误信息.下载查看错误信息是前端根据后台返回的对象数组放到excel表格中的. 后台返回的数组: 效果如下: 在开始之前先要了解一 ...
前端针对JSON格式的一些数据格式化处理
1.前端需求说明因为前端有时会展示一些json的代码格式,或者处理json变为javascript对象,因此在这里整理一些方法对json数据格式进行处理. 2.JSON转对象 1.代码 <!D ...
ajax 直接向后台发送请求,通过ajax异步向后端发送请求，响应请求向前端传送json格式数据的实现思路...
一.前端异步请求代码: $.ajax ({ type: "POST",//请求的方式 url: "outputservlet3",//请求url data: { ...

前端展示json格式数组

前端展示json格式数组

展示效果

实现

前端展示json格式数组相关推荐

最新文章

热门文章