vue2 el-table中显示json数据

要这样：

 用到插件：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数据