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