Element UI 的表格部份內容顯示對象格式

有時候須要在表格中顯示JSON對象的格式，實現的原理javascript

判斷數據是不是對象類型，若是是增長pre元素與code元素並替換引號，判斷的方法寫在methods裏面，根據函數返回的true或者false 來肯定如何顯示html

HTML 代碼java

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

判斷是不是對象的方法prototype

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