Vue在页面输出JSON对象，测试接口可复制使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue在页面输出JSON对象，测试接口可复制使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果图：

数据处理前：

数据处理后：

Vue在页面输出JSON对象，测试接口可复制使用,vue.js,json,elementui 文章来源地址https://www.toymoban.com/news/detail-649016.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:

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
},

到了这里，关于Vue在页面输出JSON对象，测试接口可复制使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！