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.mzph.cn/news/32883.shtml

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

相关文章

前后端分离------后端创建笔记(上)

本文章转载于【SpringBootVue】全网最简单但实用的前后端分离项目实战笔记 - 前端_大菜007的博客-CSDN博客 仅用于学习和讨论&#xff0c;如有侵权请联系 源码&#xff1a;https://gitee.com/green_vegetables/x-admin-project.git 素材&#xff1a;https://pan.baidu.com/s/…

如何使用 ESP-01S 模块

如何使用 ESP-01S 模块 原始PDF文档 参考&#xff1a; 将 ESP-01 用作 WiFi shield的更好方法 (e-tinkers.com) How do I use ESP8266 ESP-01S WiFi Module with ESP-01S Adapter - Using Arduino / Programming Questions - Arduino Forum ESP-01S WiFi 模块 – 配置布线 -…

服务管理和计划任务

文章目录 服务管理计划任务 服务管理 systemctl 命令字 服务名 //配置服务与systemctl有关的命令字&#xff1a; 计划任务 一次性计划 at 时间 at now 5 min //当前时间五分钟后执行 at -l //列出计划任务 atrm 任务号 //删除计划任务执行完命令后Ctrld生效 周期性计…

Oracle数据迁移

问题描述&#xff1a; oracle数据库的所有表结构、数据、索引等需要需从测试库迁移到正式库。 解决步骤&#xff1a; oracle数据库迁移&#xff0c;主要通过expdp从测试库所在的源服务器将指定的数据表或数据源导出为一个或多个数据文件&#xff08;.dmp文件&#xff09;&…

添加SQLCipher 到项目中

文章目录 一、克隆下载SQLCipher二、手动导入1. 生成sqlite3.c2. 在项目中添加命令3. 添加 Security.framework 三、CocoaPods导入 SQLCipher官方地址 一、克隆下载SQLCipher $ cd ~/Documents/code $ git clone https://github.com/sqlcipher/sqlcipher.git二、手动导入 1.…

电商系统架构设计系列(八):订单数据越来越多,数据库越来越慢该怎么办?

上篇文章中&#xff0c;我给你留了一个思考题&#xff1a;订单数据越来越多&#xff0c;数据库越来越慢该怎么办&#xff1f; 今天这篇文章&#xff0c;我们来聊一下如何应对数据的持续增长&#xff0c;特别是像订单数据这种会随着时间一直累积的数据。 引言 为什么数据量越大…

【idea】点击idea启动没反应

RT 点击idea启动的时候没反应&#xff0c;接着百度报错&#xff0c;基本跟他们的也不一样。 首先我是做版本升级。其次&#xff0c;我之前是破解的。如果你也是跟我一样的话&#xff0c;那问题可能就处在破解上了 解决方式 首先&#xff0c;是跟大部分解决思路一样。先找到项…

分清性能测试,负载测试,压力测试这三个的区别

做测试一年多来&#xff0c;虽然平时的工作都能很好的完成&#xff0c;但最近突然发现自己在关于测试的整体知识体系上面的了解很是欠缺&#xff0c;所以&#xff0c;在工作之余也做了一些测试方面的知识的补充。不足之处&#xff0c;还请大家多多交流&#xff0c;互相学习。 …

C++笔记之单例模式

C笔记之单例模式 参考笔记&#xff1a;C笔记之call_once和once_flag code review 文章目录 C笔记之单例模式1.返回实例引用2.返回实例指针3.单例和智能指针share_ptr结合4.单例和std::call_once结合5.单例和std::call_once、unique_ptr结合 1.返回实例引用 代码 #include <…

ubuntu 如何命令行打开系统设置(Wifi,网络,应用程序...)

关于GNOME GNOME 是一个自由、开放源代码的桌面环境&#xff0c;它运行在 Linux 和其他类 UNIX 操作系统上。它是 GNU 项目的一部分&#xff0c;旨在为 Linux 操作系统提供一个现代化、易于使用的用户界面。 GNOME 桌面环境包括许多应用程序&#xff0c;例如文件管理器、文本编…

侯捷 C++ part2 兼谈对象模型笔记——5 三个C++11新特性

5 三个C11新特性 5.1 variadic templates 模板参数可变化&#xff0c;其语法为 ... (加在哪看情况) // 当参数pack里没有东西了就调用这个基本函数结束输出 void print() { }// 用于打印多个参数的可变参数模板函数 template <typename T, typename... Args> void pri…

SQL Developer中的Data Redaction

SQL Developer中的Data Redaction用起来比命令行方便多了。可以选定表或视图&#xff0c;右键点击“遮盖保护”菜单。 但赋权方面有需要注意的地方。 假设Redact Admin是SYS&#xff0c;Redact User是HR。虽然SYS具备所有权限&#xff0c;但还是报以下错误。其实这个错误是针…

湖南科技学院图书馆藏八一新书《乡村振兴战略下传统村落文化旅游设计》

湖南科技学院图书馆藏八一新书《乡村振兴战略下传统村落文化旅游设计》

Chrome浏览器导出插件并安装到其他电脑浏览器上的解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

Python-OpenCV中的图像处理-直方图

Python-OpenCV中的图像处理-直方图 直方图统计直方图绘制直方图Matplotlib绘制灰度直方图Matplotlib绘制RGB直方图 使用掩膜统计直方图直方图均衡化Numpy图像直方图均衡化OpenCV中的直方图均衡化CLAHE 有限对比适应性直方图均衡化 2D直方图OpenCV中的2D直方图Numpy中2D直方图 直…

使用 ESP32 Arduino 和机器学习实现WIFI室内定位

在这个 Arduino 机器学习项目中,我们将使用附近的 WiFi 接入点来定位我们所在的位置。为了使该项目正常运行,您需要一块配备 WiFi 的板,例如 ESP8266、ESP32 或 MKR WiFI 1010。 什么是室内定位? 我们都习惯了 GPS 定位,我们的设备将使用卫星来跟踪我们在地球上的位置。GP…

数学建模—分类模型

本讲将介绍分类模型。对于而分类模型&#xff0c;我们将介绍逻辑回归&#xff08;logistic regression&#xff09;和Fisher线性判别分析两种分类算法&#xff1b;对于多分类模型&#xff0c;我们将简单介绍Spss中的多分类线性判别分析和多分类逻辑回归的操作步骤下。 本题按水…

Paddle OCR V4 测试Demo

效果 项目 VS2022.net4.8OCRV4 代码 using OpenCvSharp; using Sdcb.PaddleInference; using Sdcb.PaddleOCR; using Sdcb.PaddleOCR.Models; using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; usin…

Springboot开发常用注解

文章目录 1.RestController2.Data3.RequestMapping4.Builder 1.RestController RestController注解其实就是将 return 中的内容以 JSON字符串的形式返回客户端 controller的详解 2.Data Data详解 3.RequestMapping RequestMapping 4.Builder Builder

【Wamp】安装 | 局域网内设备访问

安装教程&#xff1a; https://wampserver.site/article/1.html 下载 https://www.wampserver.com/en/ 安装路径上不能有中文 安装好之后图标呈绿色 放入网页文件 将网页文件放置于wamp文件夹的www子文件夹 例如&#xff1a;\Wamp\program\www 修改http端口 WAMP服务器…