效果圖：

數(shù)據(jù)處理前：

?數(shù)據(jù)處理后：

文章來源地址http://www.zghlxwxcb.cn/news/detail-649016.html

代碼實現(xiàn)：?

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="入?yún)?>
		<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 = [] //返回一個數(shù)組
	let row = '' //組成數(shù)組的參數(shù)
	let objStr = '' //轉(zhuǎn)化key對應的Value是對象{}的情況
	let arrObj = '' //轉(zhuǎn)化key對應的Value是數(shù)組[]里面是對象{}的情況
	for (let i in obj) {
		if (typeof obj[i] === 'object') { // 變量是對象類型
			if (Array.isArray(obj[i])) { // 變量是數(shù)組類型
				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
},

到了這里，關(guān)于Vue在頁面輸出JSON對象，測試接口可復制使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！