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

效果图:

数据处理前:

数据处理后:

代码实现:

HTML:

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:

javascript 复制代码
this.tableData.forEach(n => {
	n.enteringGinseng = this.setObjorStr(n.enteringGinseng)
})
javascript 复制代码
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
},
相关推荐
加减法原则5 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
天若有情6736 小时前
React、Vue、Angular的性能优化与源码解析概述
vue.js·react.js·angular.js
草巾冒小子6 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
eggcode7 小时前
Vue+Openlayers加载OSM、加载天地图
vue.js·openlayers·webgis
面朝大海,春不暖,花不开8 小时前
结构化数据格式解析:JSON 与 XML 的技术应用与实践
xml·json
武昌库里写JAVA10 小时前
vue3面试题(个人笔记)
java·vue.js·spring boot·学习·课程设计
PythonicCC11 小时前
Django核心知识点详解:JSON、AJAX、Cookie、Session与用户认证
ajax·django·json
lalalalalalalala11 小时前
开箱即用的 Vue3 无限平滑滚动组件
前端·vue.js
前端Hardy11 小时前
8个你必须掌握的「Vue」实用技巧
前端·javascript·vue.js
布兰妮甜11 小时前
开发在线商店:基于Vue2+ElementUI的电商平台前端实践
前端·javascript·elementui·vue