vue-json-view与vue-json-viewer

一

就很普遍的方法
vue-json-view

npm i -S vue-json-views  // 注意是 views
import jsonView from 'vue-json-views'

<template>
    <json-view :data="json"/>
</template>
 
<script>
    import jsonView from '@/components/json-view';
 
    export default {
        components: {
            jsonView
        },
        data() {
            return {
                json: { /* json data*/ }
            }
        }
    }
</script>

可选配置说明

属性	说明	类型	默认值
json	传入的json数据（必填）	Object	-
closed	是否折叠全部	Boolean	false
deep	展开深度,越大渲染速度越慢,建议不超过5	Number	3
icon-style	折叠按钮样式，可选值为square、circle、triangle	String	square
icon-color	两个折叠按钮的颜色	Array	theme=vs-code时，[’#c6c6c6’, ‘#c6c6c6’]，其他情况为[’#747983’, ‘#747983’]

vue-json-viewer

这两个配置项不一样，个人建议使用 vue-json-viewer（是viewer，不是views）
原因：copyable在views中不生效，所以建议使用viewer