要这样:
用到插件:vue-json-pretty
// 安装
npm install vue-json-pretty@1.7.1 --save
// 在使用页面引入
import VueJsonPretty from 'vue-json-pretty/lib/vue-json-pretty.js'
// 注册
components: { VueJsonPretty },
// 使用--我这边是封装的组件,具体按需求来,json格式的要使用JSON.parse转一下
<!-- 自定义tooltip -->
<el-table-column v-if="item.type === 'tooltipDialog'" :align="item.align || 'center'"
:width="item.width || ''" :formatter="item.formatter || null" :fixed="item.fixed"
:label="item.label" :key="item.type + index" :prop="item.key">
<template slot-scope="scope">
<el-tooltip placement="top" effect="light">
<div slot="content" class="tooltip_content">
<vue-json-pretty :deep="1" selectableType="single" :showSelectController="false"
:highlightMouseoverNode="true" path="res"
:data="scope.row[item.key] && scope.row[item.key] != null ? JSON.parse(scope.row[item.key]) : '暂无数据'">
</vue-json-pretty>
</div>
<el-button class="see_tooltip">{{ item.tooltipBtn ? item.tooltipBtn : '查看' }}</el-button>
</el-tooltip>
</template>
</el-table-column>
效果如下:可打开json数据