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

tianyawhl

发布于 2019-12-12 14:58:23

3.8K0

发布于 2019-12-12 14:58:23

文章被收录于专栏：前端之攻略

有时候需要在表格中显示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;
        }
    },

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

html