有时候需要在表格中显示JSON对象的格式,实现的原理
判断数据是否是对象类型,如果是增加pre元素与code元素并替换引号,判断的方法写在methods里面,根据函数返回的true或者false 来确定如何显示
HTML 代码
代码语言:javascript复制<el-table :data="decryptTableData1" border height="calc(100% - 61px)">
<el-table-column fixed prop="name" label="名称" width="100px"></el-table-column>
<el-table-column prop="value" label="信息" max-width="700px">
<template slot-scope="scope">
<div v-if="dataObject(scope.row.value)">
<!-- <pre style="overflow:auto;"><code>{{ JSON.stringify(scope.row.info, null, 4)}}</code></pre> -->
<pre style="overflow:auto;"><code>{{ JSON.stringify(scope.row.value, null, 4).replace(/"/g, "")}}</code></pre>
<!-- <pre>{{ JSON.stringify(JSON.parse(scope.row.info), null, 4)}}</pre> -->
</div>
<div v-else>{{ scope.row.value }}</div>
</template>
</el-table-column>
</el-table>
数据格式
代码语言:javascript复制 decryptTableData1: [
{ name: "名称1", value: "01" },
{ name: "名称2", value: 151 },
{ name: "名称3", value: "01" },
{
name: "名称4",
value: {
子名称1: "191112152638",
子名称2: 2,
子名称3: "0000111100000034"
}
}
],
判断是否是对象的方法
代码语言:javascript复制 dataObject(info) {
try {
return Object.prototype.toString.call(info) === "[object Object]";
} catch (e) {
return false;
}
},