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

2019-12-12 14:58:23 浏览数 (1)

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

0 人点赞