Vue在页面输出JSON对象,测试接口可复制使用

效果图:

数据处理前:

 数据处理后:

代码实现: 

HTML:

<el-table height="600" :data="tableData" border style="width: 100%" tooltip-effect="dark" size="mini"><el-table-column fixed prop="date" label="序号" align="center" width="50"></el-table-column><el-table-column prop="username" label="登录名" align="center" width="150"></el-table-column><el-table-column prop="name" label="姓名" align="center" width="150"></el-table-column><el-table-column prop="requestAddress" label="请求地址" align="center" width="350"></el-table-column><el-table-column prop="enteringGinseng" label="入参"><template slot-scope="{row}"><template v-if="Array.isArray(row.enteringGinseng)"><div>{{`{`}}</div><div class="text_json" v-for="(item,index) in row.enteringGinseng" :key="index">{{item?`${item},`:''}}</div><div>{{`}`}}</div></template><template v-else>{{row.enteringGinseng}}</template></template></el-table-column><el-table-column prop="requestTime" label="请求时间" align="center" width="200"></el-table-column><el-table-column label="操作" align="center" width="150"><template slot-scope="scope"><el-button type="text" size="small">删除</el-button></template></el-table-column>
</el-table>

js:

this.tableData.forEach(n => {n.enteringGinseng = this.setObjorStr(n.enteringGinseng)
})
setObjorStr(obj) {let arr = [] //返回一个数组let row = '' //组成数组的参数let objStr = '' //转化key对应的Value是对象{}的情况let arrObj = '' //转化key对应的Value是数组[]里面是对象{}的情况for (let i in obj) {if (typeof obj[i] === 'object') { // 变量是对象类型if (Array.isArray(obj[i])) { // 变量是数组类型obj[i].forEach(_ => {if (typeof _ === 'object') {if (Array.isArray(_)) {_ = JSON.stringify(_)} else {arrObj = this.setObjorStr(_)_ = `{${arrObj}}`}}})row = `${i} : ${obj[i]}`} else {objStr = this.setObjorStr(obj[i])row = `${i} : {${objStr}}`}} else {row = `${i} : ${JSON.stringify(obj[i])}`}arr.push(row)}return arr
},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/92240.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

考研 408 | 【计算机网络】 应用层

导图 网络应用模型 客户/服务器&#xff08;c/s&#xff09;模型 P2P模型 DNS 域名 域名服务器 域名解析过程 文件传输协议FTP FTP服务器和用户端 FTP工作原理 电子邮件 电子邮件的信息格式 组成结构 邮件服务器的功能&#xff1a; 1.发送&接收邮件 2.给发件人报告邮…

【JavaEE进阶】Bean 作用域和生命周期

文章目录 一. 关于Bean作用域的实例1. lombok2. 实例代码 二. 作用域定义1. Bean的六种作用域2. 设置作用域 三. Spring 执行流程和 Bean 的生命周期1. Spring 执行流程2. Bean生命周期 一. 关于Bean作用域的实例 注意在此例子中需要用到lombok 1. lombok lombok是什么? Lo…

Coremail AI实验室:利用高级语境和视觉智能进行钓鱼邮件检测

在这个日益数字化的时代&#xff0c;对电子邮件安全需求是至关重要的。新兴的高级威胁邮件&#xff1a;应用社工技术的钓鱼邮件&#xff0c;仿冒公检法的钓鱼邮件等等&#xff0c;都需要更高级的防御策略。 Coremail邮件安全人工智能实验室&#xff0c;整合了高级文本语境理解和…

使用 Visual Studio GoogleTest编写 C/C++ 单元测试——入门篇

入门教程 Visual Studio 新建 GoogleTest项目&#xff0c;一路选默认参数 pch.h #pragma once#include "gtest/gtest.h"int add(int a, int b);pch.cpp #include "pch.h"int add(int a, int b) {return a b; }test.cpp #include "pch.h"TES…

HTML详解连载(3)

HTML详解连载&#xff08;3&#xff09; 专栏链接 [link](http://t.csdn.cn/xF0H3)下面进行专栏介绍 开始喽表单作用使用场景 input标签基本使用示例type属性值以及说明 input标签占位文本示例注意 单选框 radio代码示例 多选框-checkbox注意代码示例 文本域作用标签&#xff1…

抖音关键词搜索小程序排名怎么做

抖音关键词搜索小程序排名怎么做 1 分钟教你制作一个抖音小程序。 抖音小程序就是我的视频&#xff0c;左下方这个蓝色的链接&#xff0c;点进去就是抖音小程序。 如果你有了这个小程序&#xff0c;发布视频的时候可以挂载这个小程序&#xff0c;直播的时候也可以挂载这个小…

快速使用Linux系统中SSH

在Linux系统中&#xff0c;使用SSH代理跳板机是一种有效的方式&#xff0c;可以实现安全连接和访问远程服务器。本文将详细介绍SSH代理跳板机的设置和使用方法。 什么是SSH代理跳板机&#xff1f; SSH代理跳板机是一种在Linux系统中使用SSH协议实现的代理服务器。通过配置相关…

bytesec靶场

靶场下载 https://www.vulnhub.com/entry/hacknos-os-bytesec,393/ 下载完成后进入配置修改网卡 教程 配置 第一步&#xff1a;启动靶机时按下 shift 键&#xff0c; 进入以下界面 第二步&#xff1a;选择第二个选项&#xff0c;然后按下 e 键&#xff0c;进入编辑界面 将…

DRF的filter组件

DRF的Filter组件 如果某个API需要传递一些条件进行搜索&#xff0c;其实就在是URL后面通过GET传参即可&#xff0c;例如&#xff1a; /api/users?age19&category12在drf中filter组件可以支持条件搜索。 1. 自定义filter # models.py from django.db import modelsclas…

[NLP]LLM 训练时GPU显存耗用量估计

以LLM中最常见的Adam fp16混合精度训练为例&#xff0c;分析其显存占用有以下四个部分&#xff1a; GPT-2含有1.5B个参数&#xff0c;如果用fp16格式&#xff0c;只需要1.5G*2Byte3GB显存, 但是模型状态实际上需要耗费1.5B*1624GB. 比如说有一个模型参数量是1M&#xff0c;在…

[GAN] 使用GAN网络进行图片生成的“调参人”入门指南——生成向日葵图片

[GAN] 使用GAN网络进行图片生成的“炼丹人”日志——生成向日葵图片 文章目录 [GAN] 使用GAN网络进行图片生成的“炼丹人”日志——生成向日葵图片1. 写在前面&#xff1a;1.1 应用场景&#xff1a;1.2 数据集情况&#xff1a;1.3 实验原理讲解和分析&#xff08;简化版&#x…

Flink CDC系列之:TiDB CDC 导入 Elasticsearch

Flink CDC系列之&#xff1a;TiDB CDC 导入 Elasticsearch 一、通过docker 来启动 TiDB 集群二、下载 Flink 和所需要的依赖包三、在TiDB数据库中创建表和准备数据四、启动Flink 集群&#xff0c;再启动 SQL CLI五、在 Flink SQL CLI 中使用 Flink DDL 创建表六、Kibana查看Ela…

H3C QoS打标签和限速配置案例

EF&#xff1a;快速转发 AF&#xff1a;确保转发 CS&#xff1a;给各种协议用的 BE&#xff1a;默认标记(尽力而为) VSR-88-2 出口路由配置&#xff1a; [H3C]dis current-configuration version 7.1.075, ESS 8305 vlan 1 traffic classifier vlan10 operator and if-match a…

关于consul的下载方法

linux下 sudo yum install -y yum-utils sudo yum-config-manager --add-repo https://rpm.releases.hashicorp.com/RHEL/hashicorp.repo sudo yum -y install consulwindow下 https://developer.hashicorp.com/consul/downloads 然后把里面的exe文件放在gopath下就行了 验证…

苍穹外卖day11笔记

今日首先介绍前端技术Apache ECharts&#xff0c;说明后端需要准备的数据&#xff0c;然后讲解具体统计功能的实现&#xff0c;包括营业额统计、用户统计、订单统计、销量排名。 一、ECharts 是什么 ECharts是一款基于 Javascript 的数据可视化图表库。我们用它来展示图表数…

说一下什么是tcp的2MSL,为什么客户端在 TIME-WAIT 状态必须等待 2MSL 的时间?

1.TCP之2MSL 1.1 MSL MSL:Maximum Segment Lifetime报文段最大生存时间&#xff0c;它是任何报文段被丢弃前在网络内的最长时间 1.2为什么存在MSL TCP报文段以IP数据报在网络内传输&#xff0c;而IP数据报则有限制其生存时间的TTL字段&#xff0c;并且TTL的限制是基于跳数 1.3…

ceph相关概念和部署

Ceph 可用于向云提供 Ceph 对象存储 平台和 Ceph 可用于提供 Ceph 块设备服务 到云平台。Ceph 可用于部署 Ceph 文件 系统。所有 Ceph 存储集群部署都从设置 每个 Ceph 节点&#xff0c;然后设置网络。 Ceph 存储集群需要满足以下条件&#xff1a;至少一个 Ceph 监控器&#x…

继承和多态C++

这里写目录标题 继承public、protected、private 修饰类的成员public、protected、private 指定继承方式改变访问权限 C继承时的名字遮蔽问题基类成员函数和派生类成员函数不构成重载C基类和派生类的构造函数构造函数的调用顺序基类构造函数调用规则 C基类和派生类的析构函数C多…

Android app专项测试之耗电量测试

前言 耗电量指标 待机时间成关注目标 提升用户体验 通过不同的测试场景&#xff0c;找出app高耗电的场景并解决 01、需要的环境准备 1、python2.7(必须是2.7&#xff0c;3.X版本是不支持的) 2、golang语言的开发环境 3、Android SDK 此三个的环境搭建这里就不详细说了&am…

无涯教程-Perl - send函数

描述 此函数在SOCKET上发送消息(与recv相反)。如果Socket未连接,则必须提供一个目标以与TO参数进行通信。在这种情况下,将使用sendto系统功能代替系统发送功能。 FLAGS参数由按位或0以及MSG_OOB和MSG_DONTROUTEoptions中的一个或多个形成。 MSG_OOB允许您在支持此概念的Socke…