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

news2024/11/27 16:51:19

效果图:

数据处理前:

 数据处理后:

代码实现: 

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.coloradmin.cn/o/867105.html

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

相关文章

Django笔记之数据库函数之日期函数

日期函数主要介绍两个大类&#xff0c;Extract() 和 Trunc() Extract() 函数作用是提取日期&#xff0c;比如我们可以提取一个日期字段的年份&#xff0c;月份&#xff0c;日等数据 Trunc() 的作用则是截取&#xff0c;比如 2022-06-18 12:12:12&#xff0c;我们可以根据需求…

深度学习基础知识笔记

深度学习要解决的问题 1 深度学习要解决的问题2 应用领域3 计算机视觉任务4 视觉任务中遇到的问题5 得分函数6 损失函数7 前向传播整体流程8 返向传播计算方法1 梯度下降9 神经网络整体架构 11 神经元个数对结果的影响12 正则化和激活函数1 正则化2 激活函数 13 神经网络过拟合…

人工智能可解释性(二)(梯度计算,积分梯度等)

目录 1.定义 2.详述 2.1局部解释 可视化方法 梯度计算 2.2积分梯度Integrated Gradients&#xff08;梯度计算进阶&#xff09; 2. 3全局解释 2.3.1Activation Maximization 2.3.2GAN,VAE 2. 4用一个可解释模型解释不可解释模型 2. 4.1LIME 局部解释 参考文献 1.定义 可…

access怎么做进销存?借助access开发进销存管理应用

我不太推荐使用Access&#xff0c;因为他的缺点还是比较明显的&#xff1a; 1、软件自身限制 不能用于互联网&#xff1a;使用Access制作好的管理软件&#xff0c;访问页只能在局域网中使用&#xff1b;只能在Windows上运行&#xff1a;Access仅支持windows的运行环境&#x…

从零开始学习 Java:简单易懂的入门指南之多态(十)

多态&包&final&权限修饰符&代码块 第一章 多态1.1 多态的形式1.2 多态的使用场景1.3 多态的定义和前提1.4 多态的运行特点1.5 多态的弊端1.6 引用类型转换1.6.1 为什么要转型1.6.2 向上转型&#xff08;自动转换&#xff09;1.6.3 向下转型&#xff08;强制转换…

【将回声引入信号中】在语音或音频文件中引入混响或简单回声,以研究回声延迟和回波幅度对生成的回波信号感知的影响(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

积分代换和周期函数

昨晚上看书&#xff0c;有一个稳定随机过程的例题&#xff0c;涉及积分上下限代换、周期函数的微积分性质等知识点。这种题型以前肯定接触过&#xff0c;当下遇到了&#xff0c;思维仍然迷迷糊糊&#xff0c;像是一团乱麻&#xff0c;纠缠不清&#xff0c;照着答案思考了半天&a…

[Blender]Geometry nodes altermesh to UE

首先要先下载插件 AlterMesh – Use geometry nodes inside Unreal 下载对应版本的插件后 打开UE&#xff0c;在对应的设置里面挂上blender.exe的路径 去官方下载一个Blender Geometry nodes 的示例 Demo Files — blender.org​​​​​​

沃罗诺伊图(Voronoi):迷人的世界【1/2】

一、说明 Voronoi图&#xff08;也称为狄利克雷镶嵌或泰森多边形&#xff09;在自然界中无处不在。你已经遇到过他们数千次了&#xff0c;但也许没有这样称呼它。Voronoi图很简单&#xff0c;但它们具有令人难以置信的特性&#xff0c;在制图&#xff0c;生物学&#xff0c;计算…

【EI/SCOPUS征稿】第九届材料加工与制造工程国际学术会议(ICMPME 2023)

第九届材料加工与制造工程国际学术会议 2023 9th International Conference on Materials Processing and Manufacturing Engineering (ICMPME 2023) 第九届材料加工与制造工程国际学术会议(ICMPME 2023)定于2023年10月13-15日在中国南昌隆重举行。会议主要围绕“材料加工”、…

c++11 标准模板(STL)(std::basic_fstream)(五)

定义于头文件 <fstream> template< class CharT, class Traits std::char_traits<CharT> > class basic_fstream : public std::basic_iostream<CharT, Traits> 类模板 basic_fstream 实现基于文件的流上的高层输入/输出。它将 std::basic_i…

【Linux从入门到精通】文件描述符详解

文章目录 一、引言 二、引入文件描述符fd 2、1 观察fd的值 2、2 fd保存的位置 三、详解文件描述符fd 3、1 为什么要有文件描述符呢 3、2 到底什么是文件操作符呢 四、文件描述符的使用 4、1 验证文件描述符 4、1、1 验证stdin、stdout、stdout 4、1、2 验证fd值的大小顺序 4、…

IMU惯性测量单元相关技术(概念版)

重要说明&#xff1a;本文从网上资料整理而来&#xff0c;仅记录博主学习相关知识点的过程&#xff0c;侵删。 一、参考资料 新手入门系列3——Allan方差分析方法的直观理解 惯性测量单元Allan方差分析详解 IMU误差&测量模型 IMU标定之—Allan方差 IMU误差模型简介及VINS…

2023年中国日志审计市场竞争格局、市场规模、下游应用领域及行业发展趋势[图]

日志是行为或状态详细描述的载体&#xff0c;其时效性与信息丰富程度在网络安全事件分析、事件回溯和取证过程中起到重要作用。在法律层&#xff0c;日志也是重要的电子证据&#xff0c;日志记录、监控、审计手段等&#xff0c;可以帮助有效地减少信息破坏、信息泄露的问题&…

2023最新python学习方法总结!(内部机密)

不要再问我python好不好学了 我之前做过半年少儿编程老师&#xff0c;一个小学四年级的小孩子都能在我的教学下独立完成python游戏&#xff0c;植物大战僵尸简单版&#xff0c;如果要肯花时间&#xff0c;接下来的网络开发也不是问题&#xff0c;人工智能也可以学个调包也没啥问…

【TypeScript】this指向,this内置组件

this类型 TypeScript可推导的this类型函数中this默认类型对象中的函数中的this明确this指向 怎么指定this类型 this相关的内置工具类型转换ThisParameterType<>ThisParameterType<>ThisType TypeScript可推导的this类型 函数中this默认类型 对象中的函数中的this…

PLY模型格式详解【3D】

本文介绍PLY 多边形文件格式&#xff0c;这是一种用于存储被描述为多边形集合的图形对象。 PLY文件格式的目标是提供一种简单且易于实现但通用的格式足以适用于各种模型。 PLY有两种子格式&#xff1a;易于入门的 ASCII 表示形式和用于紧凑存储和快速保存和加载的二进制格式。 …

多线程与高并发--------线程

一、线程的基础概念 一、基础概念 1.1 进程与线程 什么是进程&#xff1f; 进程是指运行中的程序。 比如我们使用钉钉&#xff0c;浏览器&#xff0c;需要启动这个程序&#xff0c;操作系统会给这个程序分配一定的资源&#xff08;占用内存资源&#xff09;。 什么线程&am…

JAVA(一)

我的第一个JAVA程序 以下我们通过一个简单的实例来展示Java编程,创建文件HelloWorld.java&#xff08;文件名需与类名一致&#xff09;,代码如下 实例 public class HelloWorld{public static void main(String[] args){System.out.println(Hello World) } } 注:Srting ar…

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

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