Element UI 的表格部份内容显示对象格式

有时候须要在表格中显示JSON对象的格式，实现的原理

判断数据是不是对象类型，若是是增长pre元素与code元素并替换引号，判断的方法写在methods里面，根据函数返回的true或者false 来肯定如何显示

HTML 代码

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

数据格式

decryptTableData1: [
        { name: "名称1", value: "01" },
        { name: "名称2", value: 151 },
        { name: "名称3", value: "01" },
        {
          name: "名称4",
          value: {
            子名称1: "191112152638",
            子名称2: 2,
            子名称3: "0000111100000034"
          }
        }
      ],

判断是不是对象的方法

dataObject(info) {
        try {
            return Object.prototype.toString.call(info) === "[object Object]";
        } catch (e) {
            return false;
        }
    },